Only 2 of my three icon-bars show when I resize my browser. Previous answers show that people have not put their icon-bars in the right nav tag, however I have done this and it is all correct. My website is viewable here, but here is my code for header.php too:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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>
<div id="logo">
<a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
</div>
</div>
I found this rule on your page:
span {
color: #fff;
display: block;
font-family: centrale_sans_regularregular,helvetica;
font-size: 30px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: 80;
}
from bootstrap.
The position absolute is breaking it; override position to be static or unset for span.icon-bar and it'll fix it.
You overide the bootstrap styles with your own stylesheet.
You must remove or specify your code (http://www.franhaines.co.uk/style.css) like so:
span:not(.icon-bar) {
color: #fff;
font-family: centrale_sans_regularregular, helvetica;
font-size: 30px;
z-index: 80;
position: absolute;
display: block;
top: 50%;
text-align: center;
width: 100%;
}
Same Code Works Fine For Me.
<link href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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>
<div id="logo">
<a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
</div>
</div>
Demo Here
Note: Bootstrap CSS from Here
Related
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
I have tried text-decoration: none; and everything else but nothing is taking the underline off the link. Here is my current html and css:
nav-wrapper .navbar-header a h3 {
color: #fff;
font-weight: 200;
margin-top: 10px;
letter-spacing: 4px;
}
.nav-wrapper .navbar-header a :hover,
.navbar-header a :focus {
text-decoration-line: none !important;
color: #506C69;
}
<body data-spy="scroll" data-target=".navbar-fixed-top" data-offset="65">
<header>
<nav class="navbar company-top-nav navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="nav-wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#company-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html">
<h3>Some Text</h3>
</a>
</div>
This is just a typo. Remove the space between the element and the state in your CSS:
nav-wrapper .navbar-header a h3 {
color: #fff;
font-weight: 200;
margin-top: 10px;
letter-spacing: 4px;
}
.nav-wrapper .navbar-header a:hover,
.navbar-header a:focus {
text-decoration-line: none !important;
color: #506C69;
}
<body data-spy="scroll" data-target=".navbar-fixed-top" data-offset="65">
<header>
<nav class="navbar company-top-nav navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="nav-wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#company-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html">
<h3>Some Text</h3>
</a>
</div>
Using Bootstrap 3.3.7
I have the following markup:
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Company Name <img src="https://via.placeholder.com/220x36">
</a>
</div>
</div>
All I'm trying to do is get the logo image to appear vertically centre inside .navbar-brand
Instead it renders like this:
I want it to render like this:
The only way I could make it look how I wanted is by applying hacky CSS:
img {
margin-top:-7.5px;
display: inline-block;
}
Fiddle is here: https://jsfiddle.net/swzj0uk0/1/
I've had a look at Vertically align a navbar-brand with bootstrap and various other posts on vertical alignment.
Some posts have suggested setting a height: attribute on .navbar. I don't understand why that would be necessary because the default navbar height is 50px and my image is only 36px high.
Please can someone help?
You could add some custom style and set display: flex and align-items: center on navbar-brand element.
.navbar-brand {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Company Name <img src="http://via.placeholder.com/220x36">
</a>
</div>
</div>
</nav>
Div Above navigation don't cover whole width of page. And how to determine height?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class='col-md-12-fluid' style="
padding-bottom: 2px;
background-color:#FF5722;
padding-top: 2px;
">
<div class='col-md-8-fluid'>
<!--recently search was here-->
<a class="navbar-brand" href="index.html"><img src="images/1.jpg" height="60px" ></a> </div>
<br>
<div class='col-md-4-fluid'>
<h3>Nepal Safety</h3>
</div>
</div>
<div class='clearfix'> </div>
<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>
</div>
Thank you in advance.Your help will be appreciated.
These are normally related to the margin for container
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
You shoud redefine this class: locally or a proper css file
.container-fluid {
padding-left: 0px;
padding-right:0px;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
</div>
....
Remove the container-fluid class and replace with container-fullwidth
or you can use padding both side equal to 0
.container-fluid {
padding-left:0;
padding-right:0;
}
You use a container-fluid wich has padding at both sides.
Use the following CSS to fix this problem:
body .container-fluid {
padding-left:0;
padding-right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class='col-md-12-fluid' style="
padding-bottom: 2px;
background-color:#FF5722;
padding-top: 2px;
">
<div class='col-md-8-fluid'>
<!--recently search was here-->
<a class="navbar-brand" href="index.html"></a>
</div><br>
<div class='col-md-4-fluid'>
<h3>Nepal Safety</h3>
</div></div>
<div class='clearfix'> </div>
<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>
</div>
</nav>
What also works in this case, is to replace the container-fluid with row-fluid. That gives the full width properties without padding and without modification.
<div class="row-fluid">
I want to make my logo overlap my navbar but i dont know how. I tried to increase the size of the picture but that didn't work out, the navbar just enlarged. I also want it to be in the same div class because else it won't be nice on the mobile version of the site. I'll add pictures of what it looks like and what i want it to be and the code. Thanks in advance
Code:
<!-- Navigation -->
<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>
<img style="max-width:80px; margin-top:0px;" src="img/logo.png" class="logo navbar-brand">
<a class="navbar-brand" rel="home" href="index.html"><b>MY WEBSITE</b></a>
</div>
give your logo a class of "logo" then add:
.logo {
position: fixed;
top: 1em;
left: 1em;
display: inline;
}
fix your nav bar as well.
Hope that helps!
Just put the logo outside the nav bar div. And align it top:0px left:0px.
Or if you want the logo on the left at all times then just float it left.
I'm seeing an odd layout in Safari using a bootstrap nav header. This only shows up on first page load sometimes. Refreshing the page gives the correct layout (Opening a fresh window and pasting in the url triggers the incorrect layout fairly consistently.)
Here is a picture of the current layout:
And here's the layout when I reopen the page sometimes:
I want to have the links section on the same line as the brand, positioned to the right.
Here's the relevant html (I've tried to cut it down as much as possible):
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=
"#collapser" data-toggle="collapse"
type="button">
<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="/" id="brand">
<img src=
"http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg"
style="height: 40px">
</a>
<ul class="navbar-nav pull-left" id="path">
<li>
a link
</li>
</ul>
</div>
<div id="collapser" class="collapse navbar-collapse">
<a class="navbar-right btn btn-default" id="navbar-login">login</a>
</div>
</div>
</nav>
</header>
And the styling:
#brand {
line-height: 50px;
padding: 0 1.2rem;
padding-right: 0;
width: 120px;
}
#path {
list-style: none;
margin: 0;
padding-top: 16px;
padding-left: 0;
}
#path li {
float: left;
}
#path li:before {
content: "/";
padding: 0 0.6rem;
}
Any thoughts on working around this odd behavior?
This seems like a Safari bug.
I solved it with following:
Absolute position the real logo.
Add a 120px (width of the logo) left margin to the #path
This was complicated by the navbar collapse section, which would shift over the #path into the logo when collapsed. The easiest solution was to wrap the #path in another .navbar-brand class, #path-nav here. Finally, Firefox needs path-nav to use float: none.
Here's the revised working example:
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=
"#collapser" data-toggle="collapse"
type="button">
<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="/" id="brand">
<img src=
"http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg"
style="height: 40px">
</a>
<div id="path-nav" class="navbar-brand">
<u id="path">
<li>
a link
</li>
</ul>
</div>
</div>
<div id="collapser" class="collapse navbar-collapse">
<a class="navbar-right btn btn-default" id="navbar-login">login</a>
</div>
</div>
</nav>
</header>
.
#brand {
line-height: 50px;
padding: 0 1.2rem;
padding-right: 0;
width: 120px;
position: absolute;
}
#path {
list-style: none;
margin: 0;
margin-left: 120px;
padding-top: 4px;
padding-left: 0;
}
#path li {
float: left;
}
#path li:before {
content: "/";
padding: 0 0.6rem;
}
/* for firefox */
#path-nav {
float: none;
}
Thanks for this question and providing your solution. I added "float: left" to my second tag and it did the trick.
Thanks again.