Forum has been created to help all our customers in properly working our theme. We offer complete help with configuration theme and make default look, just like on our Be|theme demo. We don`t offer theme customization.


Before creating a new discussion, please:
1. Check on forum if discussion hasn`t been created before. Use the forum Search on the right.
2. Read carefully the documentation included to package.
3. If you didn`t find what you need and would like to post a new question click the "Start a New Discussion" button on the right.
4. You can post on forum only after registration (you need purchase code to register) .


NOTE!!! If you are starting a new topic and have got problems with your site and you want us to check what`s wrong please always give url to your site because without that we can`t check what`s wrong. Each case may be different because of your installed plugins, servers or other things.


IMPORTANT!!! Along with your inquiry, please attach the address of the page which concerns the question. This will cause the time to answer on your question will be much shorter. If you do not want to publish your address publicly in the forum, please send a private message. Thanks!

Re: Targeting Sub-menu Widths

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

Comments

  • Please sign in to see answear!
  • edited August 2
    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









  • Please sign in to see answear!
  • 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...?
  • Please sign in to see answear!
  • 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!
  • BTW, how do you format code in these comments?
  • 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;
    }
Sign In or Register to comment.