Navigation questions

  • Author
    Posts
  • #156554

    innerbayprep
    Member

    Hello!

    Thanks for providing lots of help!
    I found one question with my navigation menu: The font of the navigation does not change based on the font I choose in the theme settings. It actually happens on both header & footer area

    1. How do I change the navigation’s letter font to Futura PT (which is the font I choose in the theme setting)?
    2. How do I change the color of the letters?
    3. How do I change the size of the letters?
    4. How to remove the grey line above and below the navigation, and the “|” in between?
    5. Can I change the background color of the navigation bar? right now it is transparent, I just want it to be solid white. Thank you!!

    The blog I need help with is innerbayprep.com.

    #156592

    designorbital
    Theme Author

    Hi,
    Please try the following css snippets.

    1. Futura PT Font

    
    .sf-menu a {
        font-family: "futura-pt-1","futura-pt-2","Open Sans",sans-serif;
    }
    

    2, 3. Color & Size

    
    .sf-menu a,
    .sf-menu a:visited {
        color: #3166ec;
        font-size: 14px;
    }
    

    4. Gray Line

    
    .main-navigation {
        border-top: none;
        border-bottom: none;
    }
    

    4. Pipe Separator “|”

    
    .sf-menu > li:before {
        display: none;
    }
    

    5. Navigation Bar Color

    Navigation Bar i.e. Menu background color is already white. Please explain further if i am missing something.

    Thanks

    #156595

    innerbayprep
    Member

    Thank you a lot! It all worked out!
    regarding the navigation bar white color question.
    What I meant was that when I scroll down, the sticky menu on the top currently has a transparent white color. I would love to make it a solid color, potentially not white, but I will change the color code later. Could you please help with the sticky menu background color?
    Thank you!

    #156652

    designorbital
    Theme Author

    Hi,
    Please adjust the following css snippet to meet your need.

    
    @media (min-width: 768px) {
        .main-navigation.stuck {
            background-color: #fff;
            border-bottom: 1px solid #eee;
            opacity: 0.9;
        }
    }
    

    Thanks

    #156664

    innerbayprep
    Member

    thank you!

The topic ‘Navigation questions’ is closed to new replies.