-
AuthorPosts
-
September 26, 2015 at 5:09 pm #509543
How Can I Make Main Menu Font Adoptive? I changed the main menu font to 14 pnt. However, when I shrink the screen the main menu gets overlapped by the logo. How do I make it so the main menu becomes adoptive and doesn’t get covered by the logo when I shrink the screen?
September 26, 2015 at 11:50 pm #509604Hi,
Can you post the link to your website please?
Regards,
JosueSeptember 27, 2015 at 12:05 am #509609September 27, 2015 at 12:17 am #509611Hey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 1200px) { #top #header .av-main-nav > li > a { font-size: 14px; } }
Cheers!
JosueSeptember 27, 2015 at 12:22 am #509614thank you for the info. I have never played with the Quick CSS, can you tell me where I need to go to add the code.
September 27, 2015 at 12:23 am #509616Enfold Theme Options > General Styling > -scroll down- Quick CSS
Make sure you paste the code from the forum reply and not from the mail notification.
September 27, 2015 at 1:20 am #509619I found where i needed to put it an copy and paste it as instructed. However, it worked backwards. When screen is large, menu is small, when i shrink the screen the menu goes large. I also changed it to 18 point but no change to font size, and it is now grey instead of black. My orginal edit to the font for the menu was done in the themes advanced settings. Please let me know how to correct.
September 27, 2015 at 1:38 am #509621Try reducing
1200px
to something like989px
or less:@media only screen and (max-width: 1200px) { #top #header .av-main-nav > li > a { font-size: 14px; } }
That number is represents the window width the code gets applied.
September 27, 2015 at 2:05 am #509629I did as you instructed however it is not working. I want my font size when the screen is at its largest to be 18 point black font. Then when i shrink the screen I would like the font to reduce so as to not get overlapped by the logo.
With the css you had me add. It reduces the font size when the screen is at its largest, and turns the font grey. Then when I reduce the screen size the font size increases. Give it a try. Start with the screen large, and slowly shrink the screen you will see what I mean.
September 27, 2015 at 2:14 am #509632Hi,
Can you please create us a WordPress administrator account? post it here as a private reply.
Regards,
JosueSeptember 27, 2015 at 3:21 am #509639here you go
September 28, 2015 at 12:36 pm #510006Hi!
I implemented this code inside of your Quick CSS field:
@media only screen and (max-width: 1200px) { #top #header .av-main-nav > li > a { font-size: 14px !important; } }
An !important was missing in it. Please review your website now.
Cheers!
AndyMarch 4, 2016 at 3:51 am #593081Hello:
I recently update wordpress and my enfold theme and it seems that the quick css you gave me is not working. The menu fonts are small and the menu items are shoved tight to the right of the screen. I could use some help. The quick css i have is below. Can you let me know what the correction is please:
@media only screen and (max-width: 1200px) {
#top #header .av-main-nav > li > a {
font-size: 16px !important;
}
}
span.comment-count {
display: none;
}#top .widget li a {
color: white;
}#top .widget .children{
margin-left: 9px;
}March 4, 2016 at 4:04 pm #593313Hey!
The CSS code is being applied, this is
16px
– http://screencast.com/t/SXAfQ7jsA05WCheers!
JosueMarch 6, 2016 at 1:32 am #593825Thank you. However, I am having a problem with the display width of my header. The logo is all the way to the left side of the screen and the search is all the way to the far right side of the screen. I have the maximum container size set to 1200px, and I would like the logo and menu items to display over the container. So I would like the container size of the header to be also 1200px. Please advise.
March 6, 2016 at 1:44 am #593827Please disregard last question I figured it out. I had a box checked in header>header behavior> “let logo amnd menu postion…..”
How can I increase the space/padding between the menu items?
March 6, 2016 at 6:17 pm #593961Hey!
Try adding this code to the Quick CSS:
.av-main-nav > li > a { padding: 0 20px; } .av_seperator_small_border .av-main-nav > li > a > .avia-menu-text{ padding-left: 20px; margin-left: -20px; }
Cheers!
JosueMarch 15, 2016 at 2:05 am #598092Thank you
March 15, 2016 at 2:31 am #598098You are welcome, glad we could help :)
Regards,
Josue -
AuthorPosts
- The topic ‘How Can I Make Main Menu Font Adoptive?’ is closed to new replies.