[Resolved] Menu Item Width

Home Forums Support Menu Item Width

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #596158
    Sumit

    I was able to adjust the menu item width to change the logo size to appear on mobile view, but I have noticed that menu items are spaced out and there is no way for me to reduce the spacing in the navigation items an keep the logo height same (as I want) on mobile view.

    Other thing I am trying to achieve is have the home page scrolling effect on header same as it is on mobile (where it does not change the height of header). Basically the way it works on mobile and tablet view.

    Last thing I am trying to figure out is how to change the font size of navigation text.

    Thanks

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #596236
    Leo
    Staff
    Customer Support

    Hi there,

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

    Let me know.

    #596283
    Sumit

    I added the site URL.

    Other itching question I have is how can I fix the size of feature image to a set dimension, like you can see here on https://www.jonloomer.com/ The whole thing is so symmetrical here.

    Thanks

    #596307
    Sumit

    I think I am looking to align my image size with my exert width, is this achievable?

    Thanks

    #596378
    Leo
    Staff
    Customer Support

    Try setting the desired height for the menu items using the customizer option:
    https://docs.generatepress.com/article/menu-item-height-width/#height

    Then use CSS to set the mobile header bar and logo height:

    @media (max-width: 768px) {
        .mobile-header-navigation .site-logo.mobile-header-logo img {
            height: 99px;
        }
        .menu-toggle, .main-navigation .mobile-bar-items a {
            line-height: 99px;
        }
    }

    For the stick height, use this CSS:

    @media (max-width: 768px) {
        .mobile-header-navigation.navigation-stick .mobile-header-logo img {
            height: 70px;
        }
        .main-navigation.navigation-stick .menu-toggle, .main-navigation.navigation-stick .mobile-bar-items a {
            line-height: 70px;
        }
    }

    As for the featured image question, it needs to be wide enough to fill the container and yours currently isn’t.
    I always find it easier to resize or crop the featured image however you want using WordPress edit media before you upload:
    https://codex.wordpress.org/Edit_Media

    #596710
    Sumit

    Thanks for this, can you please tell me where can I find the width of the content field (exert), I tried to look around in customizer and I couldn’t locate the actual pixel size of exert.

    #596742
    Leo
    Staff
    Customer Support

    Somewhere around 800px should work.

    #596749
    Sumit

    so I have tried that css to change line height on mobile menu dropdown and its still unchanged. I tried it with 10px and some other values it remains unchanged.

    #596751
    Sumit

    also I wanted to ask if it was possible to set different logo height for tablet and for mobile.

    #596861
    Leo
    Staff
    Customer Support

    As I mentioned above, try setting the desired height for the menu items using the customizer option:
    https://docs.generatepress.com/article/menu-item-height-width/#height

    Then the first block of CSS is for setting the mobile bar/logo height different than the customizer option.

    #596878
    Sumit

    This is exactly what I have done.

    I have this in customizer http://prntscr.com/jteyia
    and this http://prntscr.com/jteyll in css.

    What am I missing?

    #596889
    Leo
    Staff
    Customer Support

    I thought you wanted the menu items to have smaller height? Your screenshot shows that they are still set at 108px. Try something like 70px if you want them smaller.

    Then the 2 px numbers in that block of CSS should match.

    #596912
    Sumit

    I want logo height to be 108pc but distance between menu items needs to be smaller on the mobile view.

    #596935
    Leo
    Staff
    Customer Support

    That is exactly what my solution above was for.

    Here it is again and please complete both steps below:

    1. Set the desired height for the mobile menu items using the customizer option:
    https://docs.generatepress.com/article/menu-item-height-width/#height
    It’s currently set at 108px, try something like 70px

    2. This CSS here should set the logo height to 108px and overwrite whatever you set in step 1:

    @media (max-width: 768px) {
        .mobile-header-navigation .site-logo.mobile-header-logo img {
            height: 108px;
        }
        .menu-toggle, .main-navigation .mobile-bar-items a {
            line-height: 108px;
        }
    }
    #597485
    Sumit

    I am sorry but,This is exactly what I have done, I have used this code


    @media
    (max-width: 768px) {
    .mobile-header-navigation .site-logo.mobile-header-logo img {
    height: 108px;
    }
    .menu-toggle, .main-navigation .mobile-bar-items a {
    line-height: 2px;
    }
    }

    but the line height of menu items on mobile does not want to get reduced.

    my menu items still look like this http://prntscr.com/jtpomf

    I even tried to put negative values for pixel.

Viewing 15 posts - 1 through 15 (of 21 total)
  • The topic ‘Menu Item Width’ is closed to new replies.