Re: Targeting Sub-menu Widths

Comments

• Pablo

  August 2018

  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

  August 2018 edited August 2018

  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

  August 2018

  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

  August 2018

  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

  August 2018

  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

  August 2018

  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

  August 2018

  BTW, how do you format code in these comments?
• Steve_Dillon

  August 2018

  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;

  }