I can make my logo fit in the Navbar. I just put it in the . However, I want my logo to protrude a little bit from the Navbar. That is, I want 10% of my logo above the navbar and 10% of it below the navbar and the rest of the logo should be centered in the navbar.
I'm using a template that was bought online from wrapbootstrap.com and the template obvouisly uses bootstrap. Here is the code for the navbar
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="assets/images/logo.png" alt="Logo">
</div>
You could probably use z-indexes for that and make the image just that 10% bigger. So make a class for the logo`
.logo {
z-index: 2;
margin-top: -10px; /* You just have to play with this a little bit to get the preferred result*/
}
.navbar-header {
z-index: 1;
}
and then make the logo just a bit bigger. Play a little with the width and height.
`
I would use relative and absolute positioning. If your navbar has a height of 50px and the logo is 70px high you can set .navbar-header{position:relative; height:50px;} and .logo{position:absolute; top:-10px;} this leaves you with 10px above and below the navbar.
Related
need add bootstrap tag to My html file and display My menu items. but I do not need default navbar highlight box and hamburger icon when I visit My site using tab or mobile device.
<nav class="navbar navbar-default">
<li>Fixed top</li>
<nav>
how can do it?
Hello, just remove those line of code for removing the hamburger:
<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>
Try to be more specific about the "highlight box", but i assume that you will need some CSS to work around that.
Check this fiddle too.
If i understand your properly than please apply "hidden-sm hidden-xs" class to that "li" which you don't want in responsive mode.
Thanks,
Rohan Kacha
You can use of #media query. you must define width that you want hidden nav in it ,and use of max-width(The maximum width of the display area) or max-device-width(The maximum width of the device).
For example :
#media all and (max-width : 769px) {
.navbar {
display: none;
}
}
if width be less than 769px ,so nav is hidden.
#media all and (max-width : 769px) {
.navbar {
display: none;
}
}
<nav class="navbar navbar-default">
<li>Fixed top</li>
<nav>
Note:use of full page and resize browsers.
I'm working on a site for my employer and have run into a little bit of an issue during our "rebranding" stage. The page in question can be found here: http://chargehubdevchris.azurewebsites.net/
The issue is specifically with the index page, and concerns the brand logo / text. The text is using a web font (that we generated) and the logo is an image placed inline within the Navbar-brand class anchor tag.
The img is forcing both elements to drop down about 10px from the desired height, and exceeding the nav's desired height.
The code in question is as follows:
<div class="navbar-header page-scroll">
<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 page-scroll" href="#page-top"><img class="homelogo" src="logos/ChargeHub-Logo.png"/><span class="greylogo">Charge</span>Hub</a>
</div>
I've tried to use the "pull-left" class on the img, which then aligns the text properly with the rest of the nav, but leaves the img out of line. I've applied the pull to other elements, attempted adjusting Vertical-align, and even some negative margins. They didn't really accomplish what I wanted, without causing more of a headache down the line.
I have also tried placing them in a div, floating it, setting it to display inline-block, but I couldn't get it to play nicely.
I know I must be missing something probably rather obvious, but I've tried all that I can think of, and everything that I could find online to no avail, and was hoping somebody could help me sort this. It seems like there MUST be an easy way for bootstrap to accomplish this, as I cannot be the first to try!
I did solve this problem in this way.
.navbar-brand img {
position: absolute;
top: 0px;
}
thanks :)
In your <a class="navbar-brand page-scroll" href="#page-top"> element, change the padding-top property to make it placed upper.
.navbar-default .navbar-brand {
padding-top: 0;
}
I see when you scroll down, some JS code will add navbar-shrink class to the bar. Try to add padding-top modification under this class:
.navbar-brand :not(.navbar-shrink) {
padding-top: 0;
}
When I make my browser window small, the text starting with "Open" ends up taking up several lines and I can't get the everything below to be pushed down lower. Instead, the buttons and hidden, and the main image is blocked by the text. How can I get the resizing to happen automatically? The site is: http://opensimulationsystems.org/
I tried adding "height:auto" to the navbar-header in Chrome developer tools, but "auto" isn't an option. I'm using Bootstrap Theme template.
<nav class="navbar navbar-inverse 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=".">Open Simulation Systems: The Common Agent-Based Simulation Framework (CABSF) & The Agent and Simulation Repository</a>
That's happening because navbar-brand class is floating.
One way of fixing that is using a media query for small screens on your css, setting navbar-brand to not float. Something like this:
#media screen and (max-width: 700px){
.navbar-brand {
float: none;
}
}
It is the float:left that is making it overlap. For smaller screen sizes you can apply specific styles with media queries like
#media (max-width: 500px) {
.navbar-brand {
float: none;
height:auto;
}
}
If you will remove float:left element style from .navbar-brand then you have to set your header again with padding and all the other things.
But if you remove height:50px from .navbar-brand then it will automatically set all the things. And in media query you can adjust with the width of .navbar-brand.
When I first installed twitter bootstrap and hadn't edited any Bootstrap code (the carousel) the navbar looked normal but it was a bit away from the edge.
And this is what it looked like when it was resized small:
Then when I changed the size of the navbar so it fit the entire page using CSS height and width it started glitching out:
When the browser wasn't resized it looked normal but if you made the browser smaller:
Also if the browser wasn't at the default size but it wasn't really small it would move away from the edge.
This is the code to make the collapsing function:
<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>
This is the CSS code for my navbar:
.navbar{position:relative;top:65px;height:75px;width: 100%;margin-bottom:20px;border:1px solid transparent}
How can I keep the collapsing thing and also make sure the navbar is always going from the edge to edge of the web page without it glitching out and the words disappearing and stuff like that?
As you use bootstrap you'll only need to remove "container" class from the parents of "navbar" in your html, that'll make the navbar goes full width
I am using bootstrap3. I am facing one issue. I have a navigation menu and I need to insert my logo inside that as shown below.
Insert the logo so that it will stick to the nav bar?
When we scroll the body up , the body should not go beyond NAV bar. At present, its going upside of nav.
Can any one please tell us the design.
Thank you.
This is exactly what I had to do a while ago. This is what I did:
In the navbar header replace the main title <a class="navbar-brand" href="#">Project name</a> with your logo graphics <a class="logo" href="#"><img src="/img/your-logo.png"></a>like this:
<body>
<div class="top-banner"></div> <!--this keeps the top distance and also an ideal place for the top banner-->
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<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="logo" href="#"><img src="/img/your-logo.png"></a> <!-- your logo comes here -->
</div>
In your header include a custom css after the main bootsrap.css (keep your original bootstrap.css intact to be compatibel with future updates):
.top-banner {
height:107px; /* set this to whatever height your logo needs */
}
.logo {
position:absolute;
float:left;
top:-105px; /* again, use this to position your logo, you can also use left and right */
}
Then you can go in two directions, either set navbar's margin bottom to the appropriate height:
.navbar {
margin-bottom: 60px;
position: relative;
}
Or you can also put a subheader div right under your navbar:
<div class="subheader">
<div class="subheader-inner">
<div class="container"> </div>
</div>
<div>
And add this to your css:
.subheader-inner {
height:40px;
margin-bottom:20px; /* or whatever values you need */
}
This way you can use the subheader to display navigation or other info, depending on your design.
Hope this helps.