Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #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?

    #509604

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    #509609
    #509611

    Hey!

    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! 
    Josue

    #509614

    thank 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.

    #509616

    Enfold Theme Options > General Styling > -scroll down- Quick CSS

    Make sure you paste the code from the forum reply and not from the mail notification.

    #509619

    I 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.

    #509621

    Try reducing 1200px to something like 989px 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.

    #509629

    I 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.

    #509632

    Hi,

    Can you please create us a WordPress administrator account? post it here as a private reply.

    Regards,
    Josue

    #509639

    here you go

    #510006

    Hi!

    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!
    Andy

    #593081

    Hello:

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

    #593313

    Hey!

    The CSS code is being applied, this is 16pxhttp://screencast.com/t/SXAfQ7jsA05W

    Cheers!
    Josue

    #593825

    Thank 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.

    #593827

    Please 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?

    #593961

    Hey!

    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! 
    Josue

    #598092

    Thank you

    #598098

    You are welcome, glad we could help :)

    Regards,
    Josue

Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘How Can I Make Main Menu Font Adoptive?’ is closed to new replies.