Adding Vertical Separator Lines on Nav Bar in Outreach

Community Forums Forums Design Tips and Tricks Adding Vertical Separator Lines on Nav Bar in Outreach

This topic is: not resolved

This topic contains 13 replies, has 2 voices, and was last updated by  Tony @ AlphaBlossom 8 months, 1 week ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #72701

    jdom1023
    Participant
    Post count: 7

    I would like to add vertical lines in the primary nav bar in the Outreach theme to separate each item in the nav bar. Anybody got an easy way to do this??

    Thanks,
    Dominic

    http://69.89.31.222/~eastham8
    #72872

    jdom1023
    Participant
    Post count: 7

    Anybody out there??

    #72894

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Hi,

    Add this to your theme’s style.css:

    #nav .genesis-nav-menu > li {
    border-right: 1px solid #CCCCCC;
    }

    #nav .genesis-nav-menu > li {
    border-right: 1px solid #CCCCCC;
    }

    Change the border width, style and color to whatever you like.

    If you don’t want the border on the very left and right of the menu, change the first rule to “border-left: 1px solid #CCCCCC” and change the second one to “border-left: none;”

    I prefer to keep it with the similar styles, around line 304, but you can also add it to the end of your styles.css (before the media queries @media)

    Hope that helps!

    Tony


    #73150

    jdom1023
    Participant
    Post count: 7

    Tony,

    Thanks for reaching out. Unfortunately, when I copied and pasted your code into my style.css file it didn’t work. I tried it both near line 304 and at the bottom. Neither places worked. Any idea why?

    Thanks again,
    Dominic

    #73153

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Hi Dominic,

    Not sure why…it works for me when I test it out.

    Can you leave the code in (around line 304) so I can take a look?

    Thank you,
    Tony


    #73162

    jdom1023
    Participant
    Post count: 7

    Tony,

    I added it back in. Thanks for taking a look.

    Thanks,
    Dominic

    #73205

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Hey Dominic, sorry I replied about an hour ago but I noticed it didn’t go through for some reason.

    I looked in the css file and didn’t see the code. Can you confirm you’re adding it to the right file? It should be in your wp-content/themes/outreach/style.css file.


    #73217

    jdom1023
    Participant
    Post count: 7

    Tony,

    See the attached jpeg.

    Thanks,
    Dominic

    screen capture

    #73223

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Aw, sorry I should’ve thought about it. The part that says & g t ; (without spaces) was changed by the wp editor to remove html for security. That has to change to “>” (greater than sign). That’s why the code is not showing up when I look, because it’s not valid so the css doesn’t show it.

    Change that by manually typing in the > symbol in place of the & g t ; in both locations and you should be good to go…


    • This reply was modified 8 months, 1 week ago by  Tony @ AlphaBlossom. Reason: text converted to html tag
    • This reply was modified 8 months, 1 week ago by  Tony @ AlphaBlossom. Reason: text converted to html tag
    #73228

    jdom1023
    Participant
    Post count: 7

    Bingo!! Fixed it.Thanks a ton!!

    Sincerely,
    Dominic

    #73231

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Awesome…thought I was going crazy :)


    #73232

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Hey Dominic,

    One more thing…when I pasted my code, I made an error…both lines are the same. The second line should actually be:

    
    #nav .genesis-nav-menu > li:first-child {
        border-left: 1px solid #5C5C5B;
    }
    

    That will give you the border on the very left of the menu to keep it consistent.

    Sorry about that…


    #73257

    jdom1023
    Participant
    Post count: 7

    Tony,

    Thanks! On a side note….do you know if it’s possible to NOT have these vertical lines appear when the site displays on mobile phones?

    I looked at the site on my iphone and the lines are great on the full size site, but the lines are way out of place on a mobile device.

    Got any thoughts on that?

    Thanks,
    Dominic

    #73262

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Awesome. Yeah, that’s no problem. Just add the same code to your media queries for whatever size you want the change to happen, and set border to none:

    
    #nav .genesis-nav-menu > li,
    #nav .genesis-nav-menu > li:first-child {
        border: none;
    }
    

    You have a media query for 600px…you can add it inside of that query, or add another one like:

    
    @media only screen and (max-width: 768px) {
    
       #nav .genesis-nav-menu > li,
       #nav .genesis-nav-menu > li:first-child {
           border: none;
       }
    
    }
    

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

You must be logged in to reply to this topic.