I am using the default bootstrap navbar, and I am having issues when the navbar is in collapse mode. When I click the dropdown button the navbar drops down, but the background of the drop down is transparent (or less likely, the same color as the body). What is going on here? I've tried two different navbars, and the same thing happens. The last one I used was from here: http://getbootstrap.com/examples/navbar/
And even if you don't the answer to the above, how could I select the navbar dropdown with CSS? so I could try a few more things to get it right.
You can view the problem's source at mainevillefamilyphysicians.com . Excuse the poor positioning of all the other elements on the page at small page sizes that has been fixed but not pushed to to the host.
Thanks.
Add navbar-default to the class on the ul of the menu. That will give you the default color for your menu background. You could also use navbar-inverse or define your own class in your css and use that.
Because you're assigning the height for the .navbar in your style.css file to 100px , so it'll show the 100px of it colored, and the remaining space will be transparent.
Try making it like that in your style.css:
.navbar{
height:100%;
}
Related
I have problem with bootstrap navbar link when it shows on small devices.
Here is my template :
Last item will be shows in 2 line
Seem fine, but maybe the problem is coming from the parent item of the menu, for example, if the parent div (bootstrap col) of the navbar is smaller than the navbar this issue happens. So check the parent item width and make that with the bootstrap breakpoints. for example, it's working on the same column in the desktop size you didn't expect in works on the mobile too.
eg: It's better to use breakpoint col:
<div class="col-lg-4 col-sm-6">...</div>
and you can handle it in the smaller devices' screen sizes.
BUT if it's not your problem you add this style to your navbar:
white-space: nowrap;
or another solution can be adding this to li.menu-item class:
flex: 1;
But you should check the affect of all the scenario and their result.
Please share your HTML code first, but it seems you didn't consider breakpoints in your navbar. To fix this issue, you can use the Bootstrap class "navbar-expand-sm" or "navbar-expand-md" on the navigation bar element, depending on the desired breakpoint. This will cause the navigation bar to toggle between the expanded and collapsed states based on the screen size. You can also add the "navbar-nav" class to the unordered list inside the navigation bar to format the list items as a horizontal navigation bar.
I'm trying to design my first responsive site and am having issues with the navigation. I've got everything somewhat working up to point where the hamburger kicks in. At that point, the drop down menu goes behind the form elements and I don't understand enough at this point to change the styling without affecting the normal navigation.
It seems that most of the things I've looked at are using the standard BootStrap elements with little more than color changes. I need to change the height of the nav bar (along with the hamburger), center the nav but when the site goes mobile, the nav dropdown would need to change font and background colors and text alignment.
I've got a bootply running and will continue to research as I go. I know I have a long way to go but would appreciate a helping hand getting me over this hurdle.
The bootply is at http://www.bootply.com/xtOWUEP1bw. Thanks in advance for any help.
You need z-index and background color.
Put z-index in .navbar and put background color in .navbar-collapse.in like below;
.navbar {
z-index: 10;
}
.navbar-collapse.in{
background:#fff
}
I would like to put a clickable icon next to the navbar toggle on a website using bootstrap.
I've tried playing with pull and align classes, but with no luck.
Regards
I assume you want somethig like a button right next to the toggle button when the navbar collapses.
One way to do it, is to create an <a> right in the .navbar-brand and to pull it right with .pull-right. For styling you can use a .btn (or you can choose what ever you want).
Important here is to hide this clickable icon on the screenviews where you have no toggle button, for this you can use the .hidden-md and .hidden-lg classes
Here is a Fiddle
Hope this helps you.
P.S.: Of course the <a> in the .navbar-brand also should use .navbar-brand to be well aligned.
I am using Bootstrap to create my user interface.
I have a navbar that is relatively tall; the default height of the navbar is 50px and my navbar is 100px. When I render a split button, the menu drop-down doesn't respect the navbar height (the link below illustrates the problem). How do I fix this so that the dropdown renders beneath the button (and not beneath the navbar)?
Also, if anyone has a suggestion on how to get rid of the gap in the middle of the button group, that'd be awesome too!
Clarification
I'm using SASS so I didn't realize that the link that I pasted didn't illustrate the problem. I compiled my CSS and put it in the JSFiddle link. Unfortunately, the CSS file there is huge.
If you're using BootStrap with LESS or SASS, I adjusted the $navbar-height variable to 100px (instead of 50px).
In any case, I'm hoping for some guidance on what the Bootstrap Way™ of adjusting things like the navbar height so this stuff works.
(Old link that doesn't illustrate the problem)
http://www.bootply.com/yOrqxaoM2t
(New link)
http://jsfiddle.net/marvery/VpL9N/1/
ok it looks like the issue is not with the navba height its with the margin you have set margin-bottom:33px on .navbar-btn- that needs to be removed.
.navbar-btn {
margin-bottom:0px;/* should be zero bootstrap default btn margin- remove yours */
}
that is moving the dropdown to be 33px lower than the default
fiddle link
In the below image my drop down menu is not displaying over the content.It is very transparent know.Can anyone help me what I have to add to make this drop down menu un-transparent.
Your dropdown is probably a div in the html dom. You could find the name of that `div' and then apply a background to it using css:
.dropdown_div_name { background-color: white; }
Edit:
Re looking at the image you posted it is most probably a problem with the z-index as others also suggested, since for example if you look at the 'Technology/Connected TV' header, that shows over the menu contents. That could be fixed by changing the z-index of the dropdown menu
.dropdown_div_name { z-index:100; }
where 100 should be a number bigger than the z-index of the rest items that you want it to overlap
A background-color. Without one, the default colour is transparent, hence you see everything behind it.