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
Related
Still pretty new to css and I need a hand.
I have this site: https://nuebar.com/ and it has drop downs under hair, about etc…
I need to get the dropdowns aligning to the right edge of the menu item instead of the left.
Dropdowns are currently absolutely positioned but I'm unable to use this to get them aligned how I want them to be.
Would love some insight on this
Dropdown menu css add for right:0; and parent li css add postion:relative; Below mentioned css code add and check.
.DropdownMenu{right:0;}
.HorizontalList__Item{position:relative;}
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 got the the drop down menu to work using text instead of an image and I got the drop down menu to actually go up (added bottom: 100%; to nav li ul) but I still can't seem to get the CSS formatting right.
Below is a link to my test page as well as the style sheet...
Need help making my footer navigation be in one line instead of having the new drop down Services menu on it's own line.
Need to simply center the drop down / up sub menu items when you hover over the main Services link.
http://wsgdev.com/ceiltex/indextest.html
http://wsgdev.com/ceiltex/styles.css
Thanks so much in advance for any help!
Remove the width: 100% and add display: inline-block to the nav element (style.css line 27)
read more about inline and block elements
I have a really big headache, with my pure css dropdown menu - it doesn't work on any browser.
The problem is with my second level list (subnav) - when i hover over first level(#n) links, it works just fine and displays subnav, but when i try to hover over that list(list items (links)) it rapidly disappears, and i can't select second level links and navigate.
Here is my jsFiddle.
What should i add to my css, to make it work?
Thanks for your time!
You mustn't have an empty space between the top-link and its submenu. Try to use paddings instead of margins.
I have problem in displaying drop-down menu. Please, see the example on:
http://staging.gwynconsulting.com/rif/hello-world-2/
When I hover 'Rent it finished', I can't display all menu items.
I tried to play with many css properties, but I can't make it work...
Thank you...
The first sub-item being cropped is due to two overflow: hidden; CSS instructions on #header and #nav.
Remove both instructions and you'll see sub-menus.
As your list-items are floating, #nav no longer have flowing content and thus has an height of 0: background has disappeared.
You should put your background-images on each individual floating list-item whether than ul or a parent.
From an accessibility point of view, you should not add title attributes on your links except if necessary. Here the text of your links are explicit as is and your titles are strictly identical to text: your titles are unnecessary.
Home <!-- not OK. Title attribute should be removed -->
Download our brochure <!-- OK, 2 useful infos about format and size added -->
Download our brochure <!-- not OK, title should include the text of the link and add sth to it -->
You need to add a z-index and a positon to your main and content div's top push them back behind the nav div. See http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
And one of your style sheets throws a 404: http://staging.gwynconsulting.com/rif/wp-content/themes/rif/js/gallery/jquery.ad-gallery.css