Fine tuning the secondary navigation in Genesis Prose Theme

Community Forums Forums Design Tips and Tricks Fine tuning the secondary navigation in Genesis Prose Theme

This topic is: resolved

This topic contains 5 replies, has 3 voices, and was last updated by  Sridhar Katakam 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #63038

    BeltofTruthSteve
    Participant
    Post count: 6

    I’m using the Prose theme with the Genesis framework and I’m trying to fine tune the navigation bar. You can view my site here.

    I have zero knowledge of CSS other than cutting and pasting code snippets into the custom code boxes in the admin panel. That being said, can anyone help me figure out how to make the following tweaks to the secondary navigation bar?

    1. Center the buttons
    2. Space them apart a bit more
    3. Add a 1-pixel, dotted vertical divider (to match the line beneath the sidebar headings) between each button (this is optional)
    4. Make the first button (START HERE) bold.

    Thanks!

    http://69.89.31.85/~beltoftr/
    #63144

    Sridhar Katakam
    Participant
    Post count: 841

    Looks like you managed all except # 3?

    Use this CSS:

    #subnav li {
        background: url('http://i.imgur.com/DjkLDai.gif') no-repeat right;
        padding-right: 1px;
    }
    
    #subnav li li {
        background: none;
        padding-right: 0;
    }
    
    #subnav li ul {
        width: 200px;
    }
    
    #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
        width: 180px;
    }

    #63207

    BeltofTruthSteve
    Participant
    Post count: 6

    I pasted your code into the Custom CSS box and it didn’t seem to change anything. Any ideas why not?

    Either way, thanks for your help.

    #63246

    BeltofTruthSteve
    Participant
    Post count: 6

    Okay, so I had a friend help me figure this out. The following snippets add a vertical divider between buttons, center the buttons, and space them out evenly.

    #subnav .wrap {
    display: table;
    margin: 0 auto;
    width: auto;
    }

    #subnav li {
    border-left:1px dotted #31150c;
    }
    #subnav li:first-child {
    border-left:none;
    }

    #subnav li a {
    padding:7px 29px 6px;
    }

    #66571

    Liz
    Participant
    Post count: 30

    Would one of you please post the code needed to center the navigation bar? I’ve found 2 posts where people asked the question and then figured it out on their own. However, I see no answer and still need to know that part.

    #66580

    Sridhar Katakam
    Participant
    Post count: 841

    Liz, which theme are you using? Can you provide the URL of your site?


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Fine tuning the secondary navigation in Genesis Prose Theme’ is closed to new replies.