I'm using the dropdown from
http://www.lwis.net/free-css-drop-down-menu/
My menu has Home|About|Register|Login
I would like the menu to look like
Home|About|Register|Login<-----------------stretch till end ----------------->
What i'm doing now is create an extra li and add " " to it. The code is as below
<div id="mymenu">
<ul class="dropdown dropdown-horizontal">
<li class="first">Home</li>
<li>About</li>
<li>Register</li>
<li>Login</li>
<li class="last"><span> </span></li>
</ul>
</div>
Is there a better way to do this?
Also how do i highlight choosen menu item like for example if i click home the menu home should be highlighted.
Related
I am trying to do a master page for my web page. I'm using HTML5 and Bootstrap framework. On the top of page there will be a bar that contains a dropdown menu and I would like to align this dropdown menu to the right.
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav" style="">
<li class="dropdown">
Departments<span class="caret"></span>
<ul class="dropdown-menu width-200">
<li class="dropdown-submenu">
<li>E</li>
<li>F</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
I tried
<style="float:right;">
but it didn't work and i think the reason is dropdown class is not allowing it to work. It worked with using
<style="padding-left:680px;">
but i guess it's not the right way of doing this, there must be a better way. Also what happens if I use "padding-left" and I want to add something to the left of this "li" element?
This is the screen output of the bar I am talking about.
The question is that how can I do that alignment?
Thanks
Best regards
You can use .pull-right class to ul element which is comes with bootstrap.
HTML Example
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
<ul class="nav navbar-nav navbar-right">
</ul>
To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Wrap your dropdown with <div align="right">...</div> this will ensure the text in the dropdown is all right aligned.
You can use the "navbar-right" class <ul class="nav navbar-nav navbar-right">.
I recommend you to look at the bootstrap documentation and check this link bootstrap navbar component
I have a top bar navigation and need a single item and its dropdown to have a different background colour from the rest. I have managed to change the background colour of the item but cannot change its dropdown. I have figured out how to change the drop menus for all items and I have tried all different variations to get this to work with the single item but nothing works.
Can anyone help?
Just to clarify, I am trying to select the dropdown on the right hand side with the id of account and class of top-bar-colour. Thanks
NB: I am using foundation 5. I originally had that info in the title but someone deleted it, not sure why :/
.top-bar-section .top-bar-colour {background-color:red} //this works
.top-bar-section .dropdown li a {background-color:red} //this doesn't as it changes all dropdowns
.top-bar-section li a.top-bar-colour .dropdown li a { background-color:red} //this doesn't work either
<nav class="top-bar" data-topbar >
<ul class="title-area">
<!-- Title Area -->
<li class="name"> </li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<!-- main nav section -->
<ul class="left">
<li><i class="fi-home medium"></i></li>
<li class="has-dropdown">
menu
<ul class="dropdown">
<li>Dropdown Level 1</li>
<li>Dropdown Option</li>
<li>Dropdown Option</li>
</ul>
</li>
</ul>
<ul class="right">
<li class="has-dropdown" id="account">
<i class="fi-torso medium"></i>
<ul class="dropdown"><li>Login</li></ul>
</li>
</ul>
</section>
</nav>
Assuming you want to change the color of the bar and drop down of the first one you can use this css
.top-bar-section .left .dropdown li a {background-color:red}
Let me know if my assumption is right
I want to put the menu-icon on the left hand side of the nav bar when it goes into mobile. For the life of me, I can't find any documentation how to do this. If tried putting the code in different place and using floats with custom CSS but can't get it to budge, is it possible?
Here is my code:
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left">
<li class="active">Home</li>
<li class="divider"></li>
<li class="active">Archives</li>
<li class="divider"></li>
<li class="active">Contact Us</li>
</ul>
</section>
add this to your css
.top-bar .toggle-topbar{
left:0px
}
Default css has right:0px
I'm trying show the description of parent menu in submenu.
I have something like that
<nav>
<ul nav-menu>
<li><a>item 1</a></li>
<li><a>item 2</a>
<div class="dropdown">
<span> $DESCRITPION_OF_ITEM_2</span>
<ul sub-menu>
<li>..</li>
<li>..</li>
<ul>
</div>
</ul>
</nav>
I need showing this variable "$DESCRITPION_OF_ITEM_2" which showing the description from menu editor in wordpress, is it possible ?
And second question, do you know good plugins or something for adding image to menu ?
Thank;s for response
I think this might be what you are looking for.
when my primary menu is like item menu1/submenu1.2, de li gets the class active, so i can style it, for example in a different color.
however, if i go to page menu1/submenu1.2/153 then the active class is missing.
Or anything like menu1/submenu1.2/* is the active class missing.
How can I solve this?
In your example of menu1/submenu1.2/153 the active class should have moved to 153. You can still style submenu1.2 differently by looking for the active-trail class on the <li>
For example, if you go to admin/content/comment the menu's html should look similar like this:
<ul class="menu">
<li class="expanded active-trail">
Administer
<ul class="menu">
<li class="expanded first active-trail">
<a title="Manage your site's content." href="/drupalsite/?q=admin/content">Content management</a>
<ul class="menu">
<li class="leaf first active-trail">
<a class="active" title="List and edit site comments and the comment moderation queue." href="/drupalsite/?q=admin/content/comment">Comments</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
That means you can style the admin and content links by using CSS something like the following:
li.active-trail a {
/*Whatever style here*/
}