Unable to change height of navbar with bootstrap.css - html

I past over an afternoon to search an answer at my issue. I'm still blocked with that. I'm unable to change the height of the navbar in my /dist/css/bootstrap.css file.
I found a lot of topics who deals about this problem but any of them allow me to pass through my problem.
I have the feeling that any modifications I've done in my bootstrap.css do nothing. But when I tried to remain the script who include bootstrap in my index.php this does a major effect, so I know that bootstrap is successfully loaded.
Then I tried to modify some lines in bootstrap.css in order to test what does effect :
.navbar-nav > li > a, .navbar-brand {
padding-top:4px !important;
padding-bottom:0 !important;
height: 28px;
}
.navbar {min-height:28px !important;}
I changed the height value.
The div class I use in my html code :
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="index.php">Medieval Fields</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
What I load in my head :
<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

CSS.
Use the C. The Cascading portion of the acronym refers to the fact that linking another style-sheet after bootstrap will overwrite the bootstrap values.
As Abhitalks pointed out. Sorry just saw that.

Related

span.icon-bar not being displayed in the browser

I am trying to use the Bootstrap class="icon-bar" but its not showing up on the screen.
The elements are present in the screen but default height and width is showing up 0.
I have been through multiple questions on Stack Overflow and different sites but no help.
Following is the code:
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top bg-light">
<div class="containter">
<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>
</div>
</nav>
</body>
Image:
Links that I have followed:
Bootstrap icon-bar span not visible
Bootstrap icon-bar not showing
Bootstap:span class icon bar not working
As answered in the comments by #Akhi, there is no span.icon-bar in Bootstrap 4.
Instead we need to use the class: <span class="navbar-toggler-icon"></span>
Doing so has resolved my problem.

CSS styles not getting applied

I have a bootstrap project and I want to quickly change the span. So I have a span like that with my inline css:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<span style="color:#fff !important;padding-top:10px !important;font-size:26px !important;font-weight:bold !important; display: block">Title</span>
</div>
</div>
</div>
But the thing is that style is not getting applied, however I can see the styles using dev tools:
Moreover then if I disable/enable any tickbox like that:
Then all styles gets applied.
Any ideas is what is going on and how to fix that?
when I tried it, everything is working except padding-top. To apply padding-top, use
display: block
or
display: inline-block
Edit:
Not sure if you know this already but span is an inline element which means, margin and padding will not take effect. Hence, you need to explicitly add display:block or inline-block

CSS Navigation Bootstrap issue

I have this navigation here:
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="index.html"><h1 class="logo"></h1></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<span style="color:#FFF; font-style:italic; line-height:66px; padding-right: 10px; font-size:12px; float:left;">In The Heart Of Niagara's Historic Wine Country</span>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Rooms</li>
<li>Amenities</li>
<li>Breakfast and Dining</li>
<li>Discover Our Region</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
and this looks fine on Chrome and basically everywhere except for IE 11
Here is what it looks like in chrome:
And here is what it looks like in IE 11
My issue is, I am unable to reproduce this in my IE 11 but my clients IE 11 looks like the second image. How can I fix this?
Here is the CSS:
.navbar-nav {
float: left;
margin: 0;
height: 70px;
}
.navbar-nav>li {
float: left;
height: 70px;
}
Check your file if it follows html5 structure.
<!DOCTYPE html> - is very critical, current best practice is in the first line of type HTML document.
HTML5Shiv - to enable styling of HTML5 elements in versions of Internet Explorer.
Bootstrap version - please make sure you are using the latest version of the framework.
Compatibility mode IE11 - if you are running compatibility mode, turn it off.

Bootstrap navbar, button to look like the menu collapse button

I have a Bootstrap navbar for my site for my menu. It's only used for mobile devices so the menu is always collapsed, into a standard navbar collapse button. This is aligned right; what I want, is a back-button in the same navbar that looks just like the menu collapse button, just with a different glyphicon (chevron-left), aligned left. Any ideas as to how to achieve this?
This is the menu code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Meistro</li>
<li>Deelnemers</li>
<li>Jury</li>
<li>Het orkest</li>
<li>De Harmonie</li>
<li><a class="stemmen" href="#">Stemmen</a></li>
<li>Nieuwsbrief</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here's a working example of the below: http://seanconnelly.me/bootstrap-standard-button-with-left-mobile-back-button
Add a new Button right above your other button:
<button type="button" class="navbar-toggle navbar-left"><span class="glyphicon glyphicon-chevron-left"></span></button>
Note that I've added a new class called navbar-left. You can rename this to whatever you want to (such as back-button). I'm also using the glyphicon left chevron that ships with Bootstrap by default, you can change it out if you're using FontAwesome or something else.
Add the CSS
.navbar-left {
float:left;
margin-left:15px;
padding:6px 10px;
}
Should be it -- tweak it from there to fit your purpose. Hope this helps.

Change text color of navbar bootstrap

I want to change the text color of my bootstrap navbar. How should I go about doing this in css?
To be more specific, I want to change the text color of the labels A, B, C, D.
Here is my code:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">A really cool title!</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>A</li>
<li>B</li>
<li>C</li>
<li><a id="d.html">D</a></li>
</ul>
</div>
</div>
Very basic CSS will do this.
.navbar-nav > li > a {
color: red;
}
If you're using less file you can override with variable #navbar-default-color and much more thing else.
Link for navbar variables : http://getbootstrap.com/customize/#navbar
You can also generate a custom bootstrap version as you need, just read tho official doc here : http://getbootstrap.com/customize/