I know similar questions have been asked, however after a lot of solution searching, none of them are working for me.
I am attempting to style (mostly concerned with font, color, and hover) the links in my Navbar.
html:
<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="#">FLO Home</a>
</div>
<div class="collapse navbar-collapse nav-links" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
css:
.navbar {
background-color: white;
}
.nav-links li a {
color: black;
}
What it looks like:
Screen Shot
In bootstrap, to color the ANCHOR links:
.nav a {
color: black;
}
You can also use Dev-Tools in the browser and right-click on the element you want to style, so it identifies the classes.
Create a class in the a elements you got in the nav bar. Name it something like blackletter for example. Then in css put color:black under .blackletter
Related
I come to you because I'm pulling my hair out of my head on a design issue with bootstrap navbars.
I did a fixed top navbar with differents menu, one on the right and one on the left.
My CSS code turns the background of my links to the grey when the user hover them. But I notice that my menu items don't have the same height so when my pointer hover the smaller item, the new color doesn't fill the full height of the header bar.
This is some screenshots to help you :
And there is the code of my header bar :
<div class="container-fluid header-bar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="index.html">Admin Page</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-nav navbar-left">
<li>
<a href class=" profile_image" >
<img src="../../../images/user.png" class="img-circle" alt="profile-pic"> {{vm.account.name}}
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" uib-dropdown="">
<a href class="dropdown-toggle lang_selector" uib-dropdown-toggle="">
<span class="flag-sm flag-sm-{{vm.defaultLang.flag}}"></span><span class="lang_desc">{{vm.defaultLang.text}}</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" uib-dropdown-menu="">
<li ng-repeat="lang in vm.langs"><a href class="lang_selector" ng-click="vm.defaultLang = lang"><span class="flag-sm flag-sm-{{lang.flag}}"></span><span class="lang_desc">{{lang.text}}</span></a></li>
</ul>
</li>
<li>
<a href="" ng-click="vm.logout()">
<md-icon class="li-icon-black material-icons" aria-label="logout">exit_to_app</md-icon>
</a>
</li>
</ul>
</div>
And there is the CSS code :
.smsmode-nav .navbar-header {
width: 250px;
}
.lang_selector > span {
vertical-align: middle;
}
.lang_desc {
margin-left: 8px
}
.navbar-nav > li > a.profile_image {
padding-top: 10px;
padding-bottom: 10px;
}
.profile_image > img {
width: 30px;
}
I know there is a story of padding but I try everything and I can't fix it. I'm desperated ! So I need your help please !
hi remove this css i hope you got your solutions
.lang_selector > span {
vertical-align: middle;
}
I'm targetting the the li with the value Tracking inside the ul and want to adjust the height to auto or 100%. None of these work. I haven't had a way of correctly targetting that li so it fits the whole navbar height.
<nav id="admin_navbar" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)"></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Tracking</li>
</ul>
</div>
CSS I've tried to do. Color and background are to make sure I was targetting it. I wasn't and I don't know why. I've tried a lot of different combinations
.nav>ul{
height: auto;
background-color: white;
color: red;
}
I have this code for my navbar:
<nav class="navbar navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt="">
</div><!--End navbar-header-->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feedback
<li>Gallery
<li>Features
<li>Faq
<li>ContactUs
</ul>
</div>
</div><!-- End container -->
And I want to change the links color, I tried this in my css:
.navbar {
background: rgba(0,0,0,0.4);
font-family: "Raleway";
font-size:10pt;
letter-spacing: 3pt;
color: black;
}
I also tried adding !important but I can't make it.
<nav class="navbar navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt="">
</div><!--End navbar-header-->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="links">
<li>Feedback
<li>Gallery
<li>Features
<li>Faq
<li>ContactUs
</ul>
</div>
</div><!-- End container -->
CSS:
#links a{
color:#000000;
font-size:18px;
}
I just added id="links" to the ul, and then referenced the a's in that with CSS
You need to make your css more specific, color applied by bootstrap is on a. So overriding rule will be:
.navbar-nav > li >a{
color:black;
}
to override the default rule applied by bootstrap on anchor:
a {
color: #337ab7;
text-decoration: none;
}
Pen
This makes sure that this color is applied only to the anchor which is direct descendant of li which is direct descendant of .navbar-nav. In order to apply globally (all hyperlinks in your webpage), You could as well override by doing a{color:black}. You also need to make sure you are loading your css after bootstrap so that that takes the precedence over bootstrap. Avoid using !important it will destroy any cascadeability of the css and will prevent any overriding later on.
Here is a possible solution" https://jsfiddle.net/99x50s2s/52/
CSS:
.nav>li>a{
background: rgba(0,0,0,0.4);
font-family: "Raleway";
font-size:10pt;
letter-spacing: 3pt;
color: black;
}
I want to build a bootstrap 3 navbar like the facebook app, with some icons.
The problem is that when the bar its collapsed, all the icons are hidden. If I put the icons outside from <div class="collapse navbar-collapse"> the icons are out and not hidden, but the <ul><li> doen't work and put my icons vertically.
If its possible I want also to align the icons in the center:
Thats all! Thanks friends ;)
EDIT1:
HTML Code
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<span class="glyphicon glyphicon-comment"></span>
<span class="glyphicon glyphicon-edit"></span>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</div>
CSS Code
.navbar-header .navbar-icon {
line-height:50px;
height:50px;
}
.navbar-header a.navbar-icon {
padding:0 10px;
float:left;
}
JSBin Example
This example is working now. I need to know hw can I align in the center the icons in the mobile responsive version.
In the mobile version, wrap your icons in a div with style text-align:center and remove the float left of your icons.
I'm having trouble with lining up the connections and sign out sections on my navbar toggle. As you can see, the last two are out of line with the others. I am using the bootstrap 3 site as a reference, but I'm sure I have something not marked right.
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Dash</li>
<li>Edit Profile</li>
<li>Invite</li>
<li>Record A Message</li>
<li>
<p class="navbar-text">Connections <span class="badge">0</span></p>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Sign out as <a class="navbar-link" href="Login.aspx">User</a></p>
</li>
</ul>
</div>
<!-- /.navbar -->
</nav>
Thank you
I have tried a few different ways and the only solution I found without breaking the "mobile-first" approach was overriding the "navbar-text" class with a margin-left: 15px which also appears on the #media (min-width: 768px) line 4695.
.navbar-text {
margin-left: 15px;
}
I hope it helps ;)
trying removing the paragraph tags