[Resolved] How to change size of logo on mobile sticky menu?

Home Forums Support [Resolved] How to change size of logo on mobile sticky menu?

Home Forums Support How to change size of logo on mobile sticky menu?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1759350
    milan

    Hello, I would like to change size of logo on mobile sticky menu (only logo, no font, no hamburger, no icons…). I have SVG logo in size 658x160px, it is used in header. In sticky menu it is very small and if i put this logo from header to sticky menu and set the optimal size of logo, the mobile menu is colapsed… check the screenshot: https://ibb.co/jJCYcYZ.

    I tried to change this size in Primary Navigation – Menu Item Height, but this option is applied also for icons and fonts in this menu, and I do not want to use this option for this, only logo. And how to place hamburger icon to left and search icon to right, logo in center? Thanks for help.

    #1759476
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know πŸ™‚

    #1759566
    milan

    severni-vietnam.cz
    north-vietnam.com

    Now there is no logo in mobile sticky menu

    #1759692
    Leo
    Staff
    Customer Support

    Can you use a logo so I can actually see the issue and provide a solution?

    #1760592
    milan

    I tried to solve this problem again. And the final solution is, that i can not to set the size of height of main navigation for mobile and main navigation for desktop. I would like to keep the main navigation height on desktop for 60px and for mobile to 80px.
    If i change the Menu Item Height for dekstop on Sticky menu customizer to 60px, it is not possible to change this settings on mobile sticky menu. The same settings is applied for mobile and desktop…

    #1760673
    Leo
    Staff
    Customer Support

    I’m still not seeing a logo on the mobile screen.

    Can you make it show please?

    Thanks!

    #1760718
    milan

    Now you can check it, I placed my logo to mobily sticky menu.
    It is ok on mobile, but only for desktop I would like to change height of the navigation menu to 60px (now is 80px). 80px height for mobile is ok, but not for main navigation on desktop.

    #1760739
    Ying
    Staff
    Customer Support

    Hi Milan,

    I’m confused, I just checked your sites linked in the private info field, but both of them are NOT GP site.

    Could you make sure?

    #1760743
    milan

    GP sites are both of them, I have GP Premium πŸ™‚

    #1761019
    Elvin
    Staff
    Customer Support

    Hi there,

    I’ve checked the 2 sites and one of them doesn’t use a logo for its mobile header.

    But for the one that uses a logo image:

    Try adding this CSS:

    #mobile-header .site-logo.mobile-header-logo {
        width: 200px;
        height: auto;
    }

    adjust 200px to your preferred size.

    The north vietnam size doesn’t use a logo. To adjust the “North Vietnam” text, you’ll have to change the Site title font size on Appearance > customize > Typography > Header.

    #1761249
    milan

    Thanks Elvin, it is also possible solution, but…. There ares still some conflicts, if I put e.g.240px or 200px, I see this logo on mobile phone without any change of the size. I do not know if you understand what I want to do. I want to place svg logo from header to mobile sticky header for automatical (optimal size).
    If I change height of items in sticky menu another item is gone or height of items in sticky menu is bad. I play with this already about 2 days πŸ™‚

    #1761296
    Elvin
    Staff
    Customer Support

    I believe this is what you’re trying to do?
    https://share.getcloudapp.com/Z4uo2ZJw

    Try this CSS:

    nav#mobile-header .site-logo.mobile-header-logo,
    nav#mobile-header .site-logo.mobile-header-logo  img {
        width: 340px;
        height: auto;
    }
    
    nav#mobile-header {
        height: fit-content !important;
    }

    Note: You have a CSS that prevents the mobile header from changing. It’s in Appearance > Customize > Additional CSS.

    #1761359
    milan

    Yes, it is done, it helped me. It could be a good idea to adapt fit-content css function to next update of GP.

    NOTE: I know about CSS in my Additional CSS styles, but I did not found what is blocking the fit-content.
    Thank you very much Elvin.

    #1762734
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. πŸ™‚

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