[Support request] Adjust Submenu (3rd Tier) Font Size, Color, and Alignement

Home Forums Support [Support request] Adjust Submenu (3rd Tier) Font Size, Color, and Alignement

Home Forums Support Adjust Submenu (3rd Tier) Font Size, Color, and Alignement

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1636140
    Tom

    Hi GP,

    I currently have a primary navigation with 3 layers of menus. Menu option 1 -> 2 -> 3. See here: https://drive.google.com/file/d/12vJ7O4KWTTC8BVjLT2D51oeAfwisIhck/view?usp=sharing

    I see in Customizer that the options allow me to change the submenu only. How can I adjust the 3rd layer of menus? (i.e. the options after the submenu: in the case, “Ultimate Guide”, “Scar Sheets”, etc.). I am looking to make changes to the font size, font/background color, and alignment (shift it up to align with bottom of my header).

    On that note, actually, I don’t believe you can change the font size of the submenu via Customizer – the only option there is for Primary Navigation, if I understand it correctly. That might be helpful to add as an option in Customizer.

    Thanks,
    Tom

    #1636401
    Elvin
    Staff
    Customer Support

    Hi there,

    I see in Customizer that the options allow me to change the submenu only. How can I adjust the 3rd layer of menus? (i.e. the options after the submenu: in the case, “Ultimate Guide”, “Scar Sheets”, etc.). I am looking to make changes to the font size, font/background color, and alignment (shift it up to align with bottom of my header).

    You can use this CSS to change the font-size and colors.

    .main-navigation ul.menu ul.sub-menu li ul.sub-menu li a {
        font-size: 20px;
        color: red;
        background-color: white;
    }

    As for the weird dis-alignment, that’s caused by a custom CSS added on your site.
    https://share.getcloudapp.com/wbu9ANpy

    This one is causing it:

    .main-navigation .main-nav ul ul {
        margin-top: 19px;
    }

    Change it to this:

    .main-navigation .main-nav > ul.sf-menu > li > ul.sub-menu {
        margin-top: 19px;
    }

    On that note, actually, I don’t believe you can change the font size of the submenu via Customizer – the only option there is for Primary Navigation, if I understand it correctly. That might be helpful to add as an option in Customizer.

    It’s pretty tricky to implement this because the amount of nested submenu varies per site. Some site will have 1 submenu while some sites can nest up to 4 submenus.

    But we’ll take a look at it and see what we can do. Thank you for bringing this to our attention.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.