Archived topic
Adjusting menu items at specific size
7 replies · Started by Chris on June 4, 2017
Okay. The CSS has been validated first. = )
I'm trying to adjust the letterspacing and the padding for this menu before it hits the mobile size.
http://i.imgur.com/Ubhxb5Y.jpg
.main-navigation .main-nav ul li a {
font-family: texta-black-webfont, Helvetica, Arial, San-Serif !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
}
@media (max-width: 769px) {
.main-navigation .main-nav ul li a {
font-family: texta-black-webfont, Helvetica, Arial, San-Serif !important;
letter-spacing: .8px !important;
text-transform: uppercase !important;
padding-left: 7px !important;
padding-right: 7px !important;
line-height: 15px !important;
font-size: 15px !important;
}
}http://gtg2017.giantishere.com/contact-forms/newsletter-signup/
Hi there,
I can see the CSS being added? https://postimg.org/image/dl0mewpwr/98427c54/
Or that's not your question?
It's added but it's not affecting the menu in the way it should. I don't see it affecting the menu at all just like in the screen shot.
What do I need to change to get it working?
Which part? Those codes are doing what those codes are supposed to do?
What are you hoping them to do?
The code should be affecting the padding, letterspacing and the font size. It's not activating at the specified size. In fact, it's not changing at all. I'm just trying to help alleviate this awkward spacing for the size between the tablet and the phone sizes.
But you didn't add style for padding or font size for the desktop portion of the code?
The code in @media (max-width: 769px) won't trigger until the screen size is less than 769px.
If you changed the mobile break point as I recalled before then you would need to change all the px number to match as well.
For the spacing you should be able to use the menu item width: https://docs.generatepress.com/article/secondary-menu-item-height-width/
That got it. It was the silly number. Almost done with this site for a while!
= \
CDS
Awesome!
