I'm using Bootstrap 3 and i want to change the background color and hover state for the links for .navbar-inverse. I tried every single thing and classes, without any luck. Its still showing the same dark gradient.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">
<img src="images/logo.png" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hotel">Hotel</li>
<li>Rooms & Suites</li>
<li>Reservation</li>
<li>Activities</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<!-- End Of Navigation -->
Your browser's developer tools can easily help you to find the correct selectors to use. Right Click > Inspect Element
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
color: red;
background: green;
}
DEMO
Related
I'm working on a project which has multiple links on first page. If a link is clicked application is routed to respective page with some delay. During that delay application shows a loader. But loader is displayed only for the first time I click on a link. It doesn't appear when I go back to first page and then click on a link loader doesn't appear.What may be the reason and how can I solve this problem?? Below is the HTML snippet:
<template>
<!-- MAIN MENU START -->
<require from="bootstrap/css/bootstrap.css"></require>
<nav class="navbar navbar-default topMenu" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<!-- Remove button that appears for xs devices
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>-->
<a class="navbar-brand nameEllipsis" id="routeTitle">${router.title}</a>
<!-- Collect the nav links, forms, and other content for toggling
.Remove this div to remove collapse features
.change display of both ul to inline-block so that they appear inline
.float 2nd ul to right to bring li to right and inline
.float 1st li of 2nd ul to left so that it displays according to the format of md and lg devices
<div class="collapse navbar-collapse" id="navbar-collapse-1"> -->
<ul style="display:inline-block;" class="nav navbar-nav navbar-left">
<li ><span class="fa fa-home"></span></li>
</ul>
<ul style="float:right;display:inline-block;" id="navigatingIcons" class="nav navbar-nav navbar-right">
<li style="float:left;" ><span class="fa fa-filter"></span></li>
<li ><span class="fa fa-cog"></span></li>
<li class="loader" show.bind="router.isNavigating">
<i class="fa fa-spinner fa-spin fa-2x"></i>
</li>
</ul>
<!-- </div>--> <!-- /.navbar-collapse -->
</div>
</nav>
<div class="">
<router-view></router-view>
</div>
</template>
Above image when application is being routed for the first time. Also, aurelia-hide class is not present for the first time.
Above image when application is routed after first time, aurelia-hide class is not removed and loader doesn't appear.
Thanks.
I am trying to make my navbar background appear white on all screens. What could be prohibiting this from happening?I change the css to !important on default and it displays correctly only on wide. I have tried adding a media query at the small and medium screen size and no luck. Also, my menu is dropping down.
.navbar-default {
background-color:white !important;
border-color: white !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"><img src=".png" alt=""/> <span class="ms-rteThemeForeColor-1-0 ms-rteFontSize-4 ms-rteFontFace-5"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>site1</li>
<li>site2</li>
<li>Site 3</li>
<li>Site 4</li></ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Do the following--
add <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>
Use data-target="#bs-example-navbar-collapse-1".
Don't use !important rather use a id and style it.
Add custom css after bootstrap css.
Working snippet
#mynav {
background-color:white;
border-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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>
<nav id="mynav" class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-controls="navbar">
<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="#"><img src=".png" alt=""/> <span class="ms-rteThemeForeColor-1-0 ms-rteFontSize-4 ms-rteFontFace-5"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>site1</li>
<li>site2</li>
<li>Site 3</li>
<li>Site 4</li></ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Hope this helps!
On this test page I am using Bootstrap. I don't see the brand name showing. What am I doing wrong? in case you need these links, here is http://andrewsamonas.com/css/bootstrap.min.css
here is http://andrewsamonas.com/css/custom2.css
relevant navbar code
<div class="row main-navigation-container navbar-fixed-top" id="primary-navbar">
<nav class="navbar">
<div class="container-fluid">
<!-- Mobile Toggle Button and stuff -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false">
<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="" target="_blank" title="Atlantic Four Winds"> Atlantic Four Winds</a>
</div>
<!-- End of mobile toggle button -->
<!-- Start of the navbar -->
<div class="collapse navbar-collapse" id="primary-navigation">
<ul class="nav nav-justified">
<li>Home<span class="sr-only">(current)</span></li>
<li>Photos</li>
<li>Rates</li>
<li>Booking</li>
<li>Things To Do <b class="caret"></b>
<ul class="dropdown-menu">
<li>Rye Beach</li>
<li>Jenness State Beach</li>
<li>Wallis Sands Beach</li>
<li>Great Island Commons</li>
<li>Odiorn State Park</li>
<li>Rye Harbor State Park</li>
<li>Seacoast Science Center</li>
<li>Granite State Whale Watch</li>
<li>Atlantic Whale Watch</li>
<li>Portsmouth Harbor Cruises</li>
<li>Rye Airfield</li>
</ul>
</li>
<li>Map</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
In your custom css file you're setting a.navbar-brand:visited to display: none
So I'm running into an issue with my navbar and media queries. I can get it to switch from regular logo to a smaller logo with no problems. The visible-sm class is giving me issues as for the life of me, I cannot get the text links to the right to reduce the margin forcing the smaller logo up and making the navigation a horror. Did I miss something in the documentation? It seems like something really simple to reduce the rela estate the links are using when hitting the 767px media query. I apologize in advance if this has already been answered I couldn't find a question specific to this issue.
Here be a picture
Here be the Bootply
Here be my HTML
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 visible-xs" href="#"><img src="images/logobug.jpg" alt="" /></a>
<a class="navbar-brand visible-sm" href="#"><img src="images/logosm.jpg" alt=""></a>
<a class="navbar-brand visible-md" href="#"><img src="images/logomd.jpg" alt=""/></a>
<a class="navbar-brand visible-lg" href="#"><img src="images/logolg.jpg" alt=" Logo" /></a>
</a>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right pull-right">
<li>HOME</li>
<li> EVENTS</li>
<li>CONTACT US</li>
<li>DIRECTIONS</li>
<li>SPONSERS</li>
<li>VENUES</li>
<li>ABOUT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Here be my CSS:
.navbar-right {
float: right;
margin-right: -25 px;
}
I think that's what you want , I removed pull right because navbar right do the same
a forked bootply
I'm using twitter bootstrap on my site and when I collapse the window partially, this happens!
If I collapse the window further, then the desired button appears and the links disappear.
Q) Why is this happening? I want the nav links to collapse at this window width, leaving the button. Nav code below:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="/" style="font-size: 24px;">My brand name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="<%= GetCssClassNavItemHome() %>">Home</li>
<li class="<%= GetCssClassNavItem("/about") %>">About</li>
<li class="<%= GetCssClassNavItem("/services") %>">Services</li>
<li class="<%= GetCssClassNavItem("/project") %>">Projects</li>
<li class="<%= GetCssClassNavItem("/prices") %>">Prices</li>
<li class="<%= GetCssClassNavItem("/blog") %>">Blog</li>
<li class="<%= GetCssClassNavItem("/contact") %>">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-pills">
<li>
<a target="_blank" href="http://www.linkedin.com/">
<i class="fa fa-linkedin fa-2x"></i>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
The problem is the padding applied in the class .container - 15px both left and right. If you reduce the padding, the problem goes away.
If you add another class to the div.container - in this example, say lesspadding:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container lesspadding">
etc.
and then apply different padding to the new class, like so:
.lesspadding {
padding-left: 10px;
padding-right: 2px;
}
Bootply here