Community Forums › Forums › Archived Forums › General Discussion › customize navbar ?
Tagged: #nav li, custom navigation, navigation links
- This topic has 7 replies, 3 voices, and was last updated 10 years, 8 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
July 22, 2013 at 10:24 am #51840fotodog13Participant
Hi all- I am working on a site where I want to change some of the navigation appearance on one of the menu tabs.
I have been able to set the background color for the li item to do what I want, but I also want to change the background
color for the other pages that appear in this particular group.Looking at firebug heres what I thought might work but didn't- have tried many variations with no luck 🙁
#menu-item-260 li a, #menu-item-260li a:link, #menu-item-260 li a:visited {
background: none repeat scroll 0 0 #ff00ff!important;
border-bottom: 1px solid #FD793A;
border-left: 1px solid #FD793A;
border-right: 1px solid #FD793A;
color: #FFFFFF;
font-size: 12px;
margin: 0;
padding: 6px 10px;
position: relative;
text-shadow: 1px 1px #903205;
text-transform: none;
width: 138px;
}Not sure I am explaining this correctly so it might be easier to just look at the site to get an idea of what I am trying to do.
( doesn't seem like it should be all that complicated )http://nysinsp.com/prestigecustomcycleswestchester
Scroll - to end of navbar to Vespa- you will see that the rollover goes to a different color-
I am trying to get the dropdown menu items on this tab only to have a different color than the other navbar links on the site
ie- the other pages show the dropdown pages as red (#c61c0b ) - I want to set these to a different color.Hope I have explained this somewhat clearly- as always thanks to anyone that can give me a clue?
Best
Scott V
http://nysinsp.com/prestigecustomcycleswestchesterJuly 22, 2013 at 1:45 pm #51895AnitaKeymasterOpen up that menu in Appearance > Menus. Then open that tab and look for CSS. If you don't see CSS, scroll up to the top, click SCREEN OPTIONS and check the box CSS. Then scroll back down to that tab. Give it a Class. The apply your css code to that class.
Love coffee, chocolate and my Bella!
July 23, 2013 at 8:14 am #52057fotodog13ParticipantHi Anitac,
Thanks for your reply, but... I tried your suggestion enabled screen options >checked CSS> added a class to my style sheet- but when I look in firebug I do not see the class I created listed. It is showing the default created by the menu presets established by wordpress.
it looks like it is something that it is non- editable?I am not sure that I am explaining what i am trying to do correctly because when I look at firebug it looks to me like it is an id not a class that controls the area I am trying to change.
This is what I am trying to do- when you look at the last tab on the menu bar ( Vespa) you will see that the hover goes to a different color - when the submenu drops down on the hover I am trying to change the background color on those pages only.
according to firebug - that area looks like it is controlled by
#nav li li a, #nav li li a:link, #nav li li a:visitedI have tried many many things to try and change this but not having any luck- nothing I add or do seems to allow the change to be recognized or seen when I go to firebug.
example I tried
#menu-item-260 nav li li a, #menu-item-260 nav li li a:link, #menu-item-260 nav li li a:visited {
background: #ff00ff!important; }also tried
#menu-item-260 {
background:#ff00ff!important;
}
and
.vespa { background:#ff00ff!important;}Any other thoughts on how to do what I am trying to do? does not seem it should be that difficult a thing to do- but admittedly I am still a newbie ( frustrated ) when it comes to things like this .
Bet
Scott VJuly 24, 2013 at 4:03 pm #52349Tony @ AlphaBlossomMemberIf you're having trouble adding the class through the admin, you can try specifically targeting that menu item in your child-theme's style.css file:
#nav #menu-item-257 .sub-menu li a {
background-color: #000000;
}If you change the menu item though, you will have to update this code to reflect the new item #.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
July 24, 2013 at 4:55 pm #52368fotodog13Participanthey Tony
Thanks for the reply
Yup tried that - added it to the style sheet there- and not being recognized - no idea why- just stumping me
also looked at the source in firebug and tried to set the css on the style sheet that way - with no results either
so you can see why I am so frustratedScott V
July 24, 2013 at 5:03 pm #52370Tony @ AlphaBlossomMemberHey Scott,
Wierd, works for me in firebug. Can you leave the rule in so I can look at it live?
What if you add !important (#000000 !important;)? I didn't need it when I tried it, but it's obviously not working for you.
Also, maybe try a different browser or clear your cache, just in case.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
July 24, 2013 at 5:58 pm #52377fotodog13ParticipantHey Tony,
Just getting this now-
Finally got it working - you are the best my friend.I made changes you suggested ( again ) cleared my cache- rebooted the computer and checked it in Chrome - and saw it working- then went to firefox and now see it working there.
* it does not seem to work if I create a style option in the menu>admin section.css options.
it now works on the style sheet if I load it manually ( finally ) - not sure why, don't really care as long as it works - moving on.Admittedly I am not the sharpest pencil in the box at times, but can hold my own on much of the stuff so you can imagine how frustrating this was getting me.
Thanks again - brought my sanity back to me - need to find someone in the forums I can play this big help you have given me here forward to - its really really appreciated 🙂
Thanks
Scott V
July 24, 2013 at 6:22 pm #52379Tony @ AlphaBlossomMemberHey Scott,
That's great news! Glad it's working now. I saw your custom style too - should be working, but sometimes there are issues with priorities, etc.
Can't tell you how many times I've spend days on something for it to just "start" working...but yeah, just glad it's fixed!
Have a great night!
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.