Twitter Bootstrap Question posted in

Navbar and bootstrap problems – Twitter bootstrap

I am new to twitter-bootstrap, all I want to do is to change the navbar so it has no borders or padding and when you hover optional links to highlight a different background color. I also want to have a margin-left and margin-right of about 10px which I can’t get working?

My code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"             href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">       </script>
 <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/>

</head>
<body>

<style>

.navbar-default {   
 border: 0;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
 background-color: #00a3fe;
 font-family: 'Quicksand', sans-serif;font-size: 14pt;font-weight: 800;width: 100%; valign: middle;color : #ffffff;

 }

.nav.navbar-nav.navbar-right li a {
color: #ffffff;
 }

.nav.navbar-nav.navbar-nav li a {
color: #ffffff;
}
</style>


<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
  <button type = "button" class = "navbar-toggle" 
     data-toggle = "collapse" data-target = "#example-navbar-collapse">
     <span class = "sr-only">Toggle navigation</span>
     <span class = "icon-bar"></span>
     <span class = "icon-bar"></span>
     <span class = "icon-bar"></span>
  </button>

  <a class = "navbar-brand" href = "#">Company</a>
</div>

<div class = "collapse navbar-collapse" id = "example-navbar-collapse">

     <ul class="nav navbar-nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
  </ul>

     <ul class="nav navbar-nav navbar-nav">
    <li class="non-active"><a href="#">Sign up</a></li>
  </ul>
     <ul class="nav navbar-nav navbar-nav">
    <li class="non-active"><a href="#">Register</a></li>
  </ul>

     <ul class="nav navbar-nav navbar-nav">
    <li class="non-active"><a href="#">About</a></li>
  </ul>


  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a>    </li>
    </ul>
  </div>

</nav>
</body>
</html>
Tags:

2

Answers


  1. 0

    You css is being overwritten by bootstrap. use .navbar.navbar-default instead of just .navbar-default to give your css preference.

    To have a margin round your nav, wrap a dive aound it and give that div padding:0 20px; that way your nav will have 20px space on the left and right. (I have given that div class="navbarcon" you can look up the css for it)

    To change background of link on hover use :hover pseudo class. I have set the background green here and when you hover over them , it changes to red.

    body,html{
  width:100%;
  margin:0;
  padding:0;
}
.navbarcon{
  width:100%;
  margin:0;
  padding:0 20px;
  background-color: #00a3fe;
}

.navbar.navbar-default {   
 border: 0;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
 background-color: #00a3fe;
 font-family: 'Quicksand', sans-serif;
 font-size: 14pt;
 font-weight: 800;
 width: 100%;
 valign: middle;
 color : #ffffff;
 }

.nav.navbar-nav.navbar-right li a {
color: #ffffff;
background-color:green;
}

.nav.navbar-nav.navbar-nav li a {
color: #ffffff;
background-color:green;
}

.nav.navbar-nav.navbar-right li a:hover {
background-color:red;
}

.nav.navbar-nav.navbar-nav li a:hover {
background-color:red;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbarcon">
<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
  <button type = "button" class = "navbar-toggle" 
     data-toggle = "collapse" data-target = "#example-navbar-collapse">
     <span class = "sr-only">Toggle navigation</span>
     <span class = "icon-bar"></span>
     <span class = "icon-bar"></span>
     <span class = "icon-bar"></span>
  </button>

  <a class = "navbar-brand" href = "#">Company</a>
</div>

<div class = "collapse navbar-collapse" id = "example-navbar-collapse">

  <ul class="nav navbar-nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li class=""><a href="#">Sign up</a></li>
    <li class=""><a href="#">Register</a></li>
    <li class=""><a href="#">About</a></li>
  </ul>

  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a></li>
    </ul>
  </div>
 </nav>
</div>
    Login or Signup to reply.
  2. 0

    Use css hover effects. Learn about it here w3schools css hover
    hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search