I'm playing with the navbar in Bootstrap, in the hopes of making it a bit smaller than the standard version.
I'm not sure how I did it, but when the size of the screen drops down enough for the toggle menu button to appear, the background is white/transparent instead of the preferred blacker inverse color.
If you have a better way of making the navbar smaller, I'm open to suggestions.
Here's a link to the full code, but will include CSS here also: http://codepen.io/anon/pen/Qbgdbo
.navbar {
height:32px !important;
min-height:32px !important;
margin:0px !important;
}
.navbar-brand {
padding-top:0px !important;
padding-bottom:0px !important;
}
.navbar-nav > li > a {
padding-top:7px !important;
padding-bottom:7px !important;
}
.navbar-header{
height:32px !important;
min-height:32px !important;
margin:0px !important;
}
.navbar-nav {
display: inline-block;
float: none;
}
.navbar-collapse {
text-align: center;
}
.navbar-toggle{
margin:3px;
}
.socialIcons {
max-width:40px;
}
Trevor, If you add the navbar-inverse class to this area of your code it will work as you want it to.
<div class="collapse navbar-inverse navbar-collapse">
<ul class="nav navbar-nav">
<li><a>About Us</a></li>
<li><a>Join Us</a></li>
<li><a>Our Mission</a></li>
<li><a>KickStarter</a></li>
</ul>
Related
When you click on the dropdown button on the navbar(button labeled Dropdown), and then click off(anywhere in the page), you can see the dropdown button flash white briefly.
I've seen this quite similar bug: Bootstrap navbar "flashing" when clicking outside of menu to close it. But it, unfortunately, doesn't work(actually copy and pasted the exact same code in css).
Here's a minimal reproducible version of the bug on plunk: https://embed.plnkr.co/plunk/nBIvKcLMkYbey8Oa
Code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-static-top mb-0">
<ul class="nav navbar-nav">
<li class="nav-item dropdown" id="games-dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>asdf</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
nav {
background-color: #26445a !important;
border-color: #26445a !important;
margin: 0px !important;
}
.navbar a{
color: #EEFBFB !important;
}
.navbar-header a{
font-size: 1.45em !important;
}
.nav >li > a:hover, .nav > li > a:focus{
background-color: #335369 !important;
}
.nav-item{
background-color: #26445a !important;
font-size: 1.23em !important;
}
#games-dropdown > .dropdown-menu a{
background-color: #ffffff !important;
color: #000000 !important;
font-size: 1.2em !important;
}
#games-dropdown > .dropdown-menu a:hover{
background-color: #d1d1d1 !important;
color: #000000 !important;
}
Thanks a lot!
It's due to Bootstrap applying a background color on the focus and hover event.
So you can override this behavior
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover
{
background-color: unset !important;
}
I think that adding lots of new CSS classes might be confusing Bootstrap. In the CSS detailed at your sandbox link there are many different background commands all pointing in one way or another to your navbar and the links in your navbar. These could easily be getting in the way of each other. You don't especially have to add new CSS. You only need to edit the classes that already exist within Bootstrap nav. It's the focus specifically that is causing trouble.
.nav
.navbar-brand
.navbar-dropdown
.navbar-toggler-icon
.menu-item
.dropdown-item
Try removing all your background instructions to begin then add new backgrounds to the above.
I am styling a navbar using CSS to modify the .navbar-inverse within Bootstrap 3.
My current HTML:
<li class="dropdown">
<a class="dropdown-toggle hvr-glow" data-toggle="dropdown" href="#">My Sites
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LinkedIn</li>
<li>Github</li>
<li>CodeSandbox</li>
</ul>
I want the to change the color of the link tag that says "My Sites" when I hover over it. Currently, when I hover the link it changes to the same color as the background, which is the color that the other links are supposed to be when hovered over... I do not want to change the hover effect of the other links.
My current CSS for the navbar is:
#banner{
width: 100%;
}
.navbar-brand{
letter-spacing: 3px;
color: #FDFFFC !important;
background-color: #011627 !important;
}
.navbar-brand:hover{
color: #E71D36 !important;
}
.navbar{
background-color: #011627 !important;
border: none !important;
}
.navbar-nav a{
color: #FDFFFC !important;
}
.navbar-nav a:hover{
color: #2EC4B6 !important;
}
.dropdown-menu{
background-color: #FF9F1C !important;
}
.dropdown-menu a:hover{
color: #011627 !important;
background-color: #FF9F1C !important;
}
.dropdown-toggle{
background-color: #2EC4B6 !important;
}
.navbar-inverse .navbar-nav > .active > a:hover{
color: #011627 !important;
}
Picture:
CSS next to my page. I am hovering the link that I cannot target
Try adding this?
.dropdown .dropdown-toggle:hover {
color: red;
}
and obviously change red in the hover to whatever color you want. Also you should only really use !important when its necessary, even for bootstrap where it is used a lot, you seem to be using it a little too much.
So I'm revamping my personal website and starting from scratch. I'm starting off with a navbar that's fixed to the bottom. However, when I insert the CSS rules with an internal stylesheet, it works the way I want it to, but when I use those exact same rules with an external stylesheet, the margin does not work properly.
Specifically, this is the problem rule:
.nav li {
margin: -5px;
}
With an internal stylesheet, it acts as intended, covering up unwanted whitespace in between the list items of my navbar (which is a stacked navbar fixed on the bottom).
However, when I put this exact same rule in the external sheet, it does not cover up that whitespace. Some other weird behavior is that if I comment out "margin: -5px;" it changes nothing, but if I comment out all of the rule ".nav li { margin: -5px; } it moves the content of each list item to the left (which is supposed to be centered using "text-align: center" in another rule.
I'm really confused by this odd behavior. Can anyone help me? Thanks.
EDIT: The weird thing is that other than linking bootstrap, jquery, etc. the html and css is pretty much nonexistent. I just put in a navbar and that's about it.
Here's the html in the body:
<div class="container-fluid">
<nav class="navbar navbar-fixed-bottom">
<ul class="nav nav-pills nav-stacked">
<li><a class="about" href="about.html"><div class="navTileContent"><i class="glyphicon glyphicon-user" aria-hidden="true"></i><p>about</p></div></a></li>
<li><a class="portfolio" href="portfolio.html"><div class="navTileContent"><i class="glyphicon glyphicon-briefcase" aria-hidden="true"></i><p>portfolio</p></div></a></li>
<li><a class="art" href="art.html"><div class="navTileContent"><i class="glyphicon glyphicon-edit" aria-hidden="true"></i><p>art</p></div></a></li>
<li><a class="contact" href="contact.html"><div class="navTileContent"><i class="glyphicon glyphicon-envelope" aria- hidden="true"></i><p>contact</p></div></a></li>
</ul>
</nav>
</div>
And here's the only CSS I have:
<style>
.nav li {
margin: -5px;
}
.nav li .navTileContent {
color: #e1e8f4;
text-align: center;
padding: 1%;
}
.nav li .navTileContent p {
padding-left: 20px;
display: inline;
}
.about {
background-color: #6ad8d1;
}
.portfolio {
background-color: #12d132;
}
.art {
background-color: #12466b;
}
.contact {
background-color: #0d336d;
}
</style>
This is meant to be a very simple sort of use case example, so while the styles won't match yours, I hope you see what I am trying to say.
<style>
li {
color: orange;
}
li.active {
color: blue;
}
li.muted {
color: red;
}
</style>
<style>
li {
color: blue;
}
li.active {
color: orange;
}
</style>
<ul>
<li>Notice this is not orange</li>
<li class="active">Notice this is orange</li>
<li class="muted">notice this is red, because nothing has overwritten it's style definition</li>
</ul>
I ma trying to create responsive mega menu with foundation,the problem is that i try every thing but i can't change the color of the right part of my menu it is still black.i change the color of top-bar and it is gray now but the .top-bar-section doesn't change.here is my CSS code:
.top-bar{
background-color:gray !important;
}
.top-bar .expanded{
background-color:gray !important;
}
.top-bar-section ul li.active>a{
color:black !important;
background-color:gray !important;
}
.mega-menu {
border-top: 1px solid #222;
}
.mega-menu .top-bar-section .right> li{
background-color:blue !important;
}
/* Change tab hover state to same colour as content background */
.mega-menu .top-bar .top-bar-section li:hover > a {
color: #222;
background: #FFF;
}
I want to change the background color of the in top-bar-section,but it dosen't change
here is a part of my code:
<div class="mega-menu">
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1>Tojjar</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a><strong class="fontstyle">درباره ما</strong></a></li>
<li><a><strong class="fontstyle">راهنما</strong></a></li>
<li><a><strong class="fontstyle">تماس با ما</strong></a></li>
thanks.
On my most recent install of FoundationPress, I believe it was the following two properties:
.top-bar-section li.active:not(.has-form) a:not(.button) {background:$color !important;}
And
#media only screen and (min-width: 64.063em){.top-bar-section li:not(.has-form) a:not(.button):hover {background:$color !important;}}
And that side block matched the color I wanted.
(The top-bar color didn't change those two settings)
I have a Bootstrap navigation bar that is more or less customized. The things is, Bootstrap applies padding-left and padding-right to the <a> elements in the navbar. I tried to override the padding-left on the first <a> element in the navbar (the one that says "Collection") but no success. It actually has to look like the first <a> element is starting at the very beginning of the navbar. I added a photo for easier understanding.
Here is the fiddle: http://jsfiddle.net/jxgkrtsd/8/
Code:
<ul class="nav nav-tabs nav-justified" role="tablist">
<div class="bottom-line"></div>
<li>Kolekcija 24<sup> 7</sup></li>
<li>Izdelki</li>
<li>Zgodba</li>
<li>Mediji</li>
<li>Materiali</li>
</ul>
<div class="bottom-line"></div>
CSS:
#import url("http://fonts.googleapis.com/css?family=Exo:400,500&subset=latin,latin-ext");
body {
font-family: 'Exo', sans-serif;
font-weight: 500;
}
.nav > li > a:hover,
.nav > li > a:focus {
background-color: transparent;
border-color: transparent;
}
.nav > li > a {
padding: 10px 5px !important;
margin-right: 0 !important;
color: black;
}
.nav-tabs.nav-justified > li > a {
border-bottom: none;
}
.nav-tabs > li > a:hover {
border-color: none !important;
}
a:hover,
a:focus {
color: black !important;
}
.bottom-line {
height: 1px;
width: 1430px;
background: black;
position: absolute;
}
The problem is not the padding. The problem is that the text is aligned to the center.
Add a text-align: left to your element and things should adjust how you would like them.
This is the code in Bootstrap that is causing the issue
.nav-tabs.nav-justified > li > a {
}
If you alter your jsFiddle you can add it to the following section of CSS:
.nav > li > a {
padding: 10px 5px !important;
margin-right: 0 !important;
color: black;
text-align:left !important;
}
Please note the !important after it. This will override the main call and give the desired effect.
Here is the updated jsFiddle example.
I've needed to do this before. After using <nav class="...."> put the rest of the contents in a new div with class="container-fluid". It should look something like this:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<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>
</button>
<a class="navbar-brand visible-xs" href="{{ HOME_PATH }}/">{{ site.title }}</a>
</div>
...
Then you can use this to get rid of padding for the links in the navbar or for the brand.
nav .container-fluid{
padding-left:0px;
padding-right:0px;
}
To get rid of padding in the links you can use something like this:
.navbar-nav>li>a{
padding-left:0px;
}
I wanted to change the default navbar bootstrap padding. My intention was to change the bottom padding to 4.5rem. Below code worked for me
.navbar{
padding-bottom: 4.5rem !important;
}
The issue is that the a tags in the navigation are displayed as blocks, instead of the inline. You can change it to display as a flexible block by setting the display to flex, then retain the full block area as the link by setting the width to 100%.
Simply add these to your custom CSS for .nav > li > a to look like:
.nav > li > a {
padding: 10px 5px !important;
margin-right: 0 !important;
color: black;
display: flex;
width: 100%;
}
This will retain the top and bottom padding/margins for blocks, the full width of the block as the link, and remove the left/right padding/margin.
Here's a JSFiddle showing it: http://jsfiddle.net/9kzfaypp/
I agree with a few other answers here like #dippas, but to get the text flush to the left, as your picture shows you need to override the anchor padding as well:
.nav-tabs.nav-justified > li > a {
text-align:left;
padding-left:0px !important;
padding-right:0px !important;
}
http://jsfiddle.net/jxgkrtsd/10/