- Posts
Hi
I’ve used some CSS to change the box sizes of the main menu, which has worked well, but I can’t find the element to change to get the text to vertically centre in the box (button). I’ve tried align-text, Vertical-align and a few other, but to no effect.
Any suggestions would be welcome.
Cheers
Hi Paul,
Thanks for reaching out and thanks for using Crio Pro WordPress theme!
I inspected the URL you linked in the forum and it looks like the Main Menu text is centered now so I’m assuming you’ve resolved the issue on your own. If not you can try using the
text-align: center;element to center your text.You could also try navigating from your WordPress dashboard to Appearance<<Customize<<Design<<Header<<Site Header Layout<<Select Layout to set your menu layout. You can probably find a header template there with the layout you desire.
I hope this helps.
Hi Brandon,
Thanks for your help with this.
I’ve got the text aligned from left to right, but I’m struggling to align it vertically. I’m trying to get the text to sit in the middle of the box inline with the logo. Currently it’s all too high.
I couldn’t find the element that I needed to change in the CSS. Would you have any ideas?
I did try going via the Appearance<<Customize<<Design<<Header<<Site Header Layout<<Select Layout but as I’m using a custom layout this option wasn’t available to me.
Many thanks
Paul
Oh yes, now I understand what you’re trying to do. Try adjusting the height of the menu items, maybe something like this
.standard-menu-enabled .sm-clean a { height: 50px !important;}.Let us know if this works for you!
Hi Brandon,
Many thanks, it worked perfectly. Didn’t need to adjust the text at all.
Thanks again,
Paul
Hi Brandon,
I’ve just noticed that the Menu box size has now reduced in height. I was trying to keep those to 90px high. I guess this new CSS is overriding the CSS I put in earlier.
/*Main Menu box heights*/
.standard-menu-enabled .sm-clean a, .standard-menu-enabled .sm-clean a.highlighted, .standard-menu-enabled .sm-clean a:active, .standard-menu-enabled .sm-clean a:focus, .standard-menu-enabled .sm-clean a:hover {
height: 92px;
}Got it. We might have to play around with it a bit. Try removing the
.standard-menu-enabledclass then give it refresh.Hi Brandon,
I’ve had a play with the CSS and worked out that line height was the key. I put this code in the CSS editor and it’s worked.
#main-menu li a, .mce-content-body .sm-clean
{
line-height: 4 !important;
}Many thanks for all the help as usual.
Cheers
PaulAwesome Paul! I’m happy to hear you were able to get this resolved. Be sure to reach back out to us if you ever need help with anything else.
Hi Brandon,
I’m struggling to get the main menu to remain in place once the screen size drops below 1200px. I’d like it to stay as it is down to a width of 960px. I’m trying to mimic this site’s behaviour http://www.lexatel.com.
I can’t find the code/element that is making the menu go to two lines when it’s under 1200px wide. Do you have any ideas?
Many thanks
Paul
Hi Paul,
Are you familiar with media queries? You can try using a media query to add your own CSS break points to theme. Then you could dictate at what point the screen size should change.
Hi Brandon,
I’m not familiar with media queries, so thanks for the information. I’ll go and study them and let you know how I get on.
Kind regards
Paul
- The topic ‘How Do I Vertically Center Main Menu Text in My Crio WordPress Theme?’ is closed to new replies.
