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.
Related
As mentioned in the title, for some reason, particular menu items that have active class do not have active-trail class and so do their parents.
Example menu tree when I am currently at page Test2:
<ul class="menu">
<li class="first expanded">
Test
<ul class="menu">
<li class="first expanded">
Test2
</li>
</ul>
</li>
</ul>
This is how should it be when I am currently at page Test2:
<ul class="menu">
<li class="first expanded active-trail">
Test
<ul class="menu">
<li class="first expanded active-trail">
Test2
</li>
</ul>
</li>
</ul>
Any help is appreciated.
It's more likely that your theme (or a module) is overriding the output using one of these hooks and changing the classes:
theme_menu_link
theme_menu_tree
template_preprocess_menu_tree
I'd recommend starting with checking out the active theme's code.
Or you can just implement theme_menu_link() in your theme and override the classes to your liking.
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'm trying to highlight navbar items that are active as shown below on Medium.com. I have added the zimme:iron-router-active package but I still am not reaching my desired effect. What's the easiest way to accomplish the bold highlighting and the bar on the bottom when the item is pressed?
This is what I have so far:
<div class="navSecondary">
<div class="menu" align="center">
<ul class="menu-items">
<li class="{{ isActiveRoute home }}"> HOME </li>
</ul>
</div>
</div>
Is there a better way to do this?
<nav>
<ul>
<li class="{{isActiveRoute regex='home'}}"> HOME </li>
</ul>
</nav>
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.
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*/
}