- This topic has 20 replies, 2 voices, and was last updated 5 years, 6 months ago by Leo.
-
AuthorPosts
-
June 9, 2018 at 11:31 am #596158Sumit
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
June 9, 2018 at 2:46 pm #596236LeoStaffCustomer SupportHi there,
Any chance you can link me to the site in question?
Let me know.
June 9, 2018 at 3:33 pm #596283SumitI 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
June 9, 2018 at 4:15 pm #596307SumitI think I am looking to align my image size with my exert width, is this achievable?
Thanks
June 9, 2018 at 8:50 pm #596378LeoStaffCustomer SupportTry setting the desired height for the menu items using the customizer option:
https://docs.generatepress.com/article/menu-item-height-width/#heightThen 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_MediaJune 10, 2018 at 9:16 am #596710SumitThanks 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.
June 10, 2018 at 9:40 am #596742LeoStaffCustomer SupportSomewhere around 800px should work.
June 10, 2018 at 9:44 am #596749Sumitso 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.
June 10, 2018 at 9:46 am #596751Sumitalso I wanted to ask if it was possible to set different logo height for tablet and for mobile.
June 10, 2018 at 2:51 pm #596861LeoStaffCustomer SupportAs 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/#heightThen the first block of CSS is for setting the mobile bar/logo height different than the customizer option.
June 10, 2018 at 3:19 pm #596878SumitThis 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?
June 10, 2018 at 4:27 pm #596889LeoStaffCustomer SupportI 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.
June 10, 2018 at 7:49 pm #596912SumitI want logo height to be 108pc but distance between menu items needs to be smaller on the mobile view.
June 10, 2018 at 8:47 pm #596935LeoStaffCustomer SupportThat 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 70px2. 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; } }
June 11, 2018 at 9:59 am #597485SumitI 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.
-
AuthorPosts
- The topic ‘Menu Item Width’ is closed to new replies.