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.
Related
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 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
I need help creating something like this link (http://www.standardchartered.co.in/borrow/)
When the user hovers over the navigation, the grey triangle image will appear. I'm not very sure how to go about doing it. Please help!
The best way to do this is to use a plug-in, possibly for jQuery. There are many drop down menu plugins available. A google search for "jquery drop down menu" will help you. One of the first results for me is:
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
The second one down on that page appears to have the effect you want, but it also depends on how you want the rest of the menu to appear. You will need to do some research and choose one that suits you.
OR, if you just want a grey triangle to appear, without the menu, when you hover over an element, then some css like this is what you want:
li:hover {
background:url('./images/grey_triangle.png') center bottom;
}
Which says, when the li element is hovered, use ./images/grey_triangle.png as the background image and place it in the center at the bottom of the element. You would need to create your own grey triangle, set appropriate padding etc, but that is the basic css you need for the effect.
I'm having some difficuilties with Twitter Bootstrap menu + adding a language dropdown menu.
I want it to be displayed in one line. Unfortunately, adding a dropdown menu splits the menu into two lines.
How to fix it?
The example of the problem is here:
jsFiddle
Adding display:inline; doesn't help everything to be displayed in one line.
And the proper order would be as standard:
Project Name_Home_About_Contact_____________Language_Logged in as Username
Any ideas how to fix it properly?
First of all don't use divs in a nav where you could use lists (<li>).
If you want to display text in a navbar use:
<span class="navbar-text">some text</span>
inside of the <li>-tags to align and style it properly.
Here is the correct markup for your nav:
JSFiddle