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.
Related
Problem with CSS Bootstrap 4 drop down (Youth Bowling Canada) not activating hyperlinks on full screen. However if you were to shrink the screen to have the hamburger dropdown it works fine.
http://www.bowlingingp.com/new/
I've tried adding z-index:9999; to the CSS on the dropdown class but it doesn't seem to work.
The hyperlinks should work when in full screen on the drop down menus as they do when the screen is shrunk to small size.
I think it has something do with the scroller on the screen.
Your assumption is right. It is a z-index issue.
Your slider with class da-slider and your dropdown container belong to different stacking groups. So set the z-index property to -1.
.da-slider {
...
z-index: -1;
...
}
PS: Truth is you've got alot going on in your app.
This is a beautiful resource to understanding z-index property: https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/
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%;
}
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
So I wanted to get the bootstrap 3 navbars links justified/centered. I asked this community why when applying .nav-justified it conflicted with .navbar-nav. those two should not be applied with each other because
The .nav-justifed class is to be used with nav-tabs / nav-pills (see
bootstrap docs) and not nav-bar. The two concepts are very different
and should not be confused.
However, you can achieve the effect you are looking for by adding the
following css:
.navbar-nav.nav-justified > li{
float:none; } nav-justifiednow plays nice with navbar-nav:
What he suggested worked perfectly, only that when I use a responsive navbar, where it will collapse on a mobile view, the links stay horizontally aligned in the mobile view, instead of them being listed vertically.
I have prepared a fiddle just in case you are a little confused.
The first navbar does not have the .nav-justified applied to it, so it works fine when using mobile view. But the links are not centered, they're pulled to the left.
The second navbar does have the .nav-justified so the links are centered, however when using mobile view the links are still centered, and not listed vertically like the first navbar.
Do you have any suggestions on how to fix this?
Jsfiddle Here
http://bit.ly/YqiQNQ
I have this food menu that looks great online. The menu is generated by a Wordpress plugin with customizable CSS. The rest of the site looks mint on the iPhone, but when you get to the menu it overlaps awfully and kind of disappears.
Open the link in the menu and make your window size really small - see how it overlaps at the smallest setting?
I was playing with #media on the widths and couldn't figure it out.
Can anyone help me make the text wrap around at the websites smallest width?
Or a plugin that will detect if the user is on mobile and display a different page entirely (just that page).
If you're having an issue with text not wrapping how you'd like it to wrap I'd suggest adding white-space: normal to the text's parent element to ensure that the text will wrap and not inherit a white-space: nowrap declaration intended for another element.
For your specific circumstance, the following CSS will force the menu to wrap appropriately:
.rmc-menu-wrap {
white-space:normal;
}