Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding Vertical Separator Lines on Nav Bar in Outreach
Tagged: css, menu, Navigation Bar, outreach
- This topic has 13 replies, 2 voices, and was last updated 10 years, 5 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
November 13, 2013 at 8:51 am #72701jdom1023Member
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,
http://69.89.31.222/~eastham8
DominicNovember 13, 2013 at 9:37 pm #72872jdom1023MemberAnybody out there??
November 14, 2013 at 1:28 am #72894Tony @ AlphaBlossomMemberHi,
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
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
November 15, 2013 at 10:03 am #73150jdom1023MemberTony,
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,
DominicNovember 15, 2013 at 10:41 am #73153Tony @ AlphaBlossomMemberHi 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
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
November 15, 2013 at 11:08 am #73162jdom1023MemberTony,
I added it back in. Thanks for taking a look.
Thanks,
DominicNovember 15, 2013 at 12:30 pm #73205Tony @ AlphaBlossomMemberHey 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.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
November 15, 2013 at 12:54 pm #73217jdom1023MemberTony,
See the attached jpeg.
Thanks,
DominicNovember 15, 2013 at 1:05 pm #73223Tony @ AlphaBlossomMemberAw, 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...
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
November 15, 2013 at 1:10 pm #73228jdom1023MemberBingo!! Fixed it.Thanks a ton!!
Sincerely,
DominicNovember 15, 2013 at 1:23 pm #73231Tony @ AlphaBlossomMemberAwesome...thought I was going crazy 🙂
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
November 15, 2013 at 1:27 pm #73232Tony @ AlphaBlossomMemberHey 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...
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
November 15, 2013 at 2:38 pm #73257jdom1023MemberTony,
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,
DominicNovember 15, 2013 at 2:45 pm #73262Tony @ AlphaBlossomMemberAwesome. 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; } }
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.