After increasing the font size menu items grow&shrink

  • Resolved F0011

    (@tfr1030vienna)


    1 year, 2 months ago

    Dear Community!
    I could not find any solution to my problem in the FAQ or in other specific topics. My issue is: I need to increase the size of the mobile menu to 16px. Now it is 14px same like the desktop menu. When I set the font size in the customizer to 16px the menu items start to “jump” (shrink&grow) with mouse over. Then I tried to set a CSS Code:
    @media screen and (max-width: 767px){ header .elementor-nav-menu .menu-item .has-submenu { font-size: 16px !important; }
    Did not work. The main question is: Why is it not possible to change the menu sizes directly in the Header Customizer without “jumping” items?

    THANK YOU!!!!!!

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

Viewing 13 replies - 1 through 13 (of 13 total)

  • Try adding this on the customizer:

    .mobile-menu a {
font-size:16px;
}

    add !important if it doesn’t work: font-size:16px !important;

    Thread Starter F0011

    (@tfr1030vienna)

    Dear Liz!
    I set your CSS Code with 16px. Please have a look at the website/menu on your mobile to see what happens. When you klick on a menu item it “shrinks” back to 14px. You know what I mean? How is it possible to stop that?
    Thank you!!!

    There is a css for the hover effect, override it with:

    .elementor-kit-6 a:hover {
    font-size: 16px;
}
    Thread Starter F0011

    (@tfr1030vienna)

    Done. The issue still exists…

    Add !important

    .elementor-kit-6 a:hover {
    font-size: 16px !important;
}
    Thread Starter F0011

    (@tfr1030vienna)

    Done. Nope – same issue. :((

    Seems to be working now on my end.

    Have you tried clearing the cache on your browser? If not, try doing a ctrl+f5 (for windows) to force reload the page.

    Thread Starter F0011

    (@tfr1030vienna)

    Cleared the cache on all browsers. Google Chrome, Firefox and Safari. Problem still exists. I see the problem also at the Desktop Browser Google Chrome (in the Developer Tool) that the menu items “shrink” when clicking. It is not directly when you hover, it shrinks when you tap/click an a menu item. You can see it when you hold the click a second.

    Do you have a caching plugin on your website? Can you try to clear the cache on that as well? Because I can’t see the !important on the css code when I view it now.

    Thread Starter F0011

    (@tfr1030vienna)

    I do not have a caching plugin. I have attached a screenshot with the CSS customizer

    https://www.icloud.com/iclouddrive/0ceTMBTqrAB0EEx1MvzQXFycA#Bildschirmfoto_2024-01-14_um_13.45

    Thread Starter F0011

    (@tfr1030vienna)

    PS: The issue is the same when I reduce the font size for example to 11px.

    Thread Starter F0011

    (@tfr1030vienna)

    Hy Liz! Problem solved!!! There was a setting in the global settings/links I completely forgot. Took me days to find that!
    Now I would kindly ask for support for the following issue: The background of the homepage is dark green and the font color of the menu is light green. The background of all other pages is light green and so I need to switch the menu font color to dark green. Which css should I use?

    Thread Starter F0011

    (@tfr1030vienna)

    I tried the following css on all pages I want to change but did not work

    }
    .page-id-31 .main-navigation li a {
    color: 003e29 !important;
    }

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘After increasing the font size menu items grow&shrink’ is closed to new replies.