CSS for improving navigation menu bar appearance

  • Unknown's avatar
    theartofintegralbeing · Member ·

    Hello,

    I have been playing around with CSS for my website http://www.integralyogaworld.com and I am not a bit stuck!
    I want a navigation menu bar that it is horizontal: long (exactly as wide as the header image) and thin (similar to the ‘edit’ and ‘blog’ buttons), but I currently have one that looks terrible and messy!
    Any thoughts (or CSS) on how I can improve the appearance of my navigation menu bar?

    Thanks in advance

    The blog I need help with is: (visible only to logged in users)

  • lindamork · Staff ·

    Hi there,

    You can try this for your navigation bar height:

    #site-navigation.main-navigation {
	height: 62px!important;
}

    Cheers!

  • Unknown's avatar
    theartofintegralbeing · Member ·

    Hi there,

    Thank you, that does work! I am still having some problems though, can you help?
    I want to change the following:
    1. the navigation menu font is not all the same colour, and I want to change it.
    2. The navigation menu bar is not exactly the same width as everything else on the website, and when I try increasing it, it is slightly off centre and looks messy.
    3. The navigation menu bar font is not central, I am not sure why.
    4. The font I want to use ff-market, but it only shows up when I make changes in customise, and not always when I am looking at the website afterwards, any ideas why?

    Here’s the CSS I am using:

    #site-navigation.main-navigation {
    height: 62px !important;
    width: auto !important;
    text-align: center;
    }

    ul {
    list-style-type: none;
    display: block;
    font-family: “ff-market-web”;
    font-size: 18px;
    }

    li {
    display: block;
    float: centre;
    width: 135px;
    font-family: “ff-market-web”;
    font-size: 18px;
    text-align: center;
    background-color: #6f8987;
    }

    li a {
    display: block;
    background-color: #6e6a70;
    text-align: center;
    padding: 8px;
    width: auto;
    text-decoration: none;
    }

    Thank you in advance!
    Gabriella ;-)

  • Unknown's avatar
    theartofintegralbeing · Member ·

    Hello!

    Just to let you know I’ve figured out why the text is not the same colour, and fixed it, but the other problems still remain!

    I’ve removed this CSS so now that’s one problem less at least!
    a:link {
    color: #6e6a70;
    }
    a:visited {
    color: #6f8987;
    }
    a:hover {
    color: #e8866e;

    Thanks!
    Gabriella ;-)

  • lindamork · Staff ·

    Hi Gabriella,

    Good to see you’ve been making headway on this! A couple of things for you to consider:

    Changing the list element properties <li> and <ul> will change them throughout your site which you probably don’t want. You might want to remove those from your custom CSS to avoid issues down the road. If you want to make changes to your navigation <li> you may want to be more specific, for example: 

    .main-navigation li {
font-size: 22px;
padding: 10px;
}

    For the font, you’re pretty close, try adding this line to the .main-navigation li above:

    font-family: "ff-market-web","ff-market-web-1",cursive;

    I’m not clear what you want to do with the width of your navigation bar – make it full width?

    Cheers!

  • The topic ‘CSS for improving navigation menu bar appearance’ is closed to new replies.