Re: Targeting Sub-menu Widths

Steve_Dillon

I'm trying to make the sub menus different widths to accommodate the length of the sub-menu names. Some of them are longer than others. 

Is there a way to do this with nth:child or something similar?

I've set a width for all of the sub-menus using:

#Top_bar .menu li ul li.menu-item {

    width: 250px !important;

}

And I'm targeting the sub-menu underneath 3D Printing with this CSS:

#Top_bar .menu li ul li#menu-item-3223 {

    width: 275px !important;

}

Lastly, I'm targeting the sub-menu underneath Events using this CSS:

#Top_bar .menu li ul li#menu-item-3542, 

#Top_bar .menu li ul li#menu-item-3532 {

    width: 350px !important;

}

Is there a way to do this with nth:child or something similar?

Ref Link: Saratech.com

Pablo

Hi,

Sorry but I'm not sure what you want to achieve.

But from my sight of view it's not possible, because all the structure of menu will fall and

it will make menu work badly. I mean adding new items or just when you update your menu, all of the id's will change.

Cheers.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Steve_Dillon

I understand each nav link has it's own unique ID. I don't want to target by ID, I'm trying to find a way to target by class or by child element.

I want to make the dropdown menus be different widths so that the text fits horizontally and doesn't wrap.

I can change all of the sub-menu widths at once by using #Top_bar .menu li ul li.menu-item, but how can I change their widths individually?

So for example, the "Software" sub-menu would be 250px wide and the "Events" sub-menu would be 350px wide, etc. without targeting the ID's?

See this Stackoverflow post. It's what I'm trying to do.

The answer there is below. How do I apply that to your theme?

.navbar-nav>li>.dropdown-menu
{

    width: yourwidth 

}

 

You can add display:
inline-block so that its width will be according to its content automatically

Pablo

This require almost recoding all the menu code.

The size of background of li items are from ul so it will always get a width of the biggest item of structure. So it's not possible to decrease width only for one item.

We cannot help you with it, you have to do it yourself

or find somebody who'll be able to do it.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Steve_Dillon

Again, I don't want to change the size of the individual <li> elements (size of background of li items)  I want to change the width of entire sub-menu.

The sub-menus have a class of: <ul class="sub-menu" style="display: block;">

How do I target the class="sub-menu" dropdown menu width? Not the width of the list items, the width of the sub-menu.

See the images below. The two sub-menus have different widths, but I'm targeting the <li>'s. I want to target the class="sub-menu".

<ul class="sub-menu"> is a child element of <ul id="menu-main-menu" class="menu menu-main">, so this should be possible with nth-child(4n) or something similar...?

Software Sub-menu

Events Sub-menu

Bryan

So for example:

If you want to taget the menu item 3D Printing and change its sub-menu width, use this css:

ul.menu li#menu-item-195 > ul.sub-menu {
  width:200px !important;
}

Just change the <li> ID number so you can target different menu items.

Cheers

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Steve_Dillon

Ahhh!! Yes, thank you Bryan. That's the syntax I was looking for. For some reason I was skipping over the ID of `#menu-item` when trying to target the sub-menu.

Thanks very much for your help!

Steve_Dillon

BTW, how do you format code in these comments?

Steve_Dillon

Actually, for anyone else that may need this:

If you change the CSS from Bryan's post above to the syntax below you can target all of the '.menu-item' in each 'ul.sub-menu' by ID number. This changes the width of the <li> link description as well as the background of the sub-menu.

For example:

ul.menu li#menu-item-198 > ul.sub-menu .menu-item {

  width: 650px;

}