Need to Widen Menu Item to accommodate dropdown arrow

  • I created a custom menu with several tabs. These auto-spaced with blank room at the end, which is fine. Today, I wanted to expand one menu item to accommodate a drop-down menu. That all went fine, except when the drop-down arrow was added the tab did not auto re-size. It is now on three lines instead of the previous two. Other tabs are much wider and there is extra blank space at the end, so this should be a simple fix — I’m just too new at this to know what it is.

    My site is https://horrorhouseparty.com and the specific tab is the Party Chatter (Forums) tab.

    Thank you in advance for any assistance you can give me. Please have mercy on me and be as specific as possible in your answer, as I am new to the jargon.

Viewing 5 replies - 1 through 5 (of 5 total)
  • lisa

    (@contentiskey)

    it is fixable.
    how comfortable do you feel with making changes some CSS code?
    have you made changes to the design before?
    to make changes a CSS editor (in your dashboard) is needed or a child theme is needed.
    since you mentioned you are new to the jargon….before I suggest code to change I want to be sure you are prepared to implement the suggested changes.

    Thread Starter MerriSedai

    (@merrisedai)

    I have custom CSS and a child theme (I’m a belt and suspenders kind of person). If it’s a css fix, I can probably manage it. Thanks so much!

    lisa

    (@contentiskey)

    happy to hear you have child theme!!!!!
    additional left and right padding is needed for the menu items to give more breathing space for the arrow to submenu

    this is the CSS element that seems to be controlling the words
    (add/modify css in child theme)
    #header-menu > li > a

    Thread Starter MerriSedai

    (@merrisedai)

    This is the be very specific part. What do I do with that?

    Also, just a note – this is specific to the down arrow. I can take out the drop-down menu and arrow and it will resize down, but then I can add an extra word and it will resize to give me much more space. But if I go back and take the extra word out and try the drop-down menu again, it shrinks back down and goes back to adding the extra line (even though the arrow is smaller than the extra text). Is there a “rule” that controls only a single word on the line with a drop-down arrow?

    Thread Starter MerriSedai

    (@merrisedai)

    I found a work-around. I added another word to the third line (what I wanted to be the second line). Thus (Forums) became (Discussion Forums). Now this line became longer than the total of what I wanted on line 1 (drop-down arrow Party Chatter). The extra text on line two added so much room it “forced” line one to take both the drop-down arrow and the extra word. Not elegant, but it put everything on two lines just like I wanted.

    Anyway, thanks for your help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Need to Widen Menu Item to accommodate dropdown arrow’ is closed to new replies.