Menu Item Width

Hi there,

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

Let me know.

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

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

Thanks

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

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.

Somewhere around 800px should work.

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.

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

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.

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?

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.

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

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;
    }
}

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.