Support » Theme: Twenty Twenty » How to narrow width of Desktop Expanded Menu

  • Resolved Roy

    (@clg87)


    I would like to modify the appearance of the desktop expanded menu. What are the css selector(s)?

    Specifically, I’d like to narrow the overall menu width. Once I know how to do that, I will reduce the font size and change font color.

    Can somebody provide the css code block?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Try the following

    .header-navigation-wrapper {
    	width: 50%
    }

    There is also the option of targeting the menu directly

    .header-navigation-wrapper .primary-menu-wrapper {
    	width: 50%
    }

    But that offsets it if less than the default 100% and doesn’t line up properly along the right hand side of the layout.

    Thread Starter Roy

    (@clg87)

    Thanks Jarret. Unfortunately, this CSS only decreases the width of the Main Menu (the traditional horizonal menu).

    I need the specific CSS to narrow the Desktop Expanded Menu.

    Can you help?

    Thanks!

    Ah, apologies for the misunderstanding. The following CSS should target what you’re looking for I beleive

    .cover-modal .modal-inner {
    	width: 25rem;
    }
    Thread Starter Roy

    (@clg87)

    Yes that worked, ty 🙂

    Thread Starter Roy

    (@clg87)

    Resolved.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to narrow width of Desktop Expanded Menu’ is closed to new replies.