Oxygen main menu to be italic, a specific colour when normal and active and more

  • Unknown's avatar
    danceflooreduk · Member ·

    Hi,

    I’m having trouble with the main navigation bar in Oxygen. I have some css in place already to get it looking a certain way but I want it to be a particular colour when normal (instead of default blue), a particular colour when active (instead of default grey), italic and for the sub menu to do the same. Is this possible? Also, can I disable the cgange in colour after a link in the main menu has been “visited,” or at least make it the same colour as when it has not been visited?

    Also, I have increased the padding of the menu to allow more space between the bottom of the menu and the rest of the site, but is there a way of decreasing the size of the drop down box (the padding)? Also, can I get rid of the line in the drop down box and centre align the text?

    I know it’s a long one, so I appreciate any help you can give me!

    The website is: https://hollyandthehotrods.com/

    Thanks,

    Sam

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

  • Unknown's avatar
    terrybrownell · Member ·

    Hello Sam!

    This code should help with the first part…

    I want it to be a particular colour when normal (instead of default blue)

    .main-navigation > div > ul > li > a {
    color: green;
}

    …a particular colour when active (instead of default grey), italic

    .main-navigation li.current-menu-item a {
    color: orange;
    font-style: italic;
}

    … and in the event you would like a different hover color:

    .main-navigation ul li a:hover {
    color: orange;
}

    Give that a try and let me know how you go. I’ll have a look at the other requirements, unless @thesacredpath, our local CSS guru beats me to it ;)

  • Unknown's avatar
    danceflooreduk · Member ·

    Thanks so much for your help, I used the first piece of code and it worked a treat, although what I ideally wanted is the navigation text to be italic in its “normal” state, is there a way of changing the first bit of code to make it italic when normal?

    The second piece of code also worked, however the only problem I still have is that the drop down menu (which on my site has a maximum of two options) displays the one that is NOT selected with the colour I thought the code would assign to the option that IS selected. Hope that makes sense! You will be able to see if you look at the site.

    Thank you!

  • Unknown's avatar
    lastfarthing · Member ·

    Hi @hollyandthehotrods,
    Cool band name! To move the text in your drop down menu you’ll want to adjust your nested li’s: 

    #menu-primary li li a,
#menu-primary li li.current-menu-item li a {
    font-size: 1.166666666666667em;
    text-transform: uppercase;
    color: #000;
    margin: 0 5px 0 5px;
    padding: 12px 12px 12px 12px; }

#menu-primary ul li a:hover,
#menu-primary li ul li a:hover {
    color: #000;
    border-bottom: none }

    You can adjust the margin and padding to whatever you need it to be. I also color corrected the links for you and uppercase transformed them to match the style of your menu.

    As for coloring and making the rest of the menu italic, this was the code that I used: 

    #menu-primary li a {
  color: #000;
	font-style: italic;
  text-transform: uppercase;}
#menu-primary li a:visited a:hover {
	color: #000; }
#menu-primary li.current-menu-item a {
	color: #000; }
  • Unknown's avatar
    danceflooreduk · Member ·

    Thanks for your reply! Your code worked brilliantly! My menu is now italic and the correct colours and the drop down is positioned better and looks a lot better!

    The only thing couple of things that are still a problem is the line between drop down options is still there and now when the parent item is selected it looks like both drop down items are selected due to them both displaying with the same colour as the “active” link.

    Is there any way to have just the drop down menu option that is selected displaying as active, with the other being the “normal” colour? And can I get rid of the line any other way?

  • Unknown's avatar
    lastfarthing · Member ·

    @hollyandthehotrods,
    To remove the borders insert this css: 

    /* Border Removal */
#menu-primary ul li li {
	border: none; }

    I’m still working on keeping the colors of the sub-menu normal when you have the top level selected. I think this is intended to be a feature that helps you remember which top-level tab you’re browsing under.

    So far not much luck. I did re-work it and separate the rest of it out for you so that it’s easier to keep track of what does what: 

    /* Main Menu Coloring */
#menu-primary li a {
  color: #BBB;
	font-style: italic;
  text-transform: uppercase;}

#menu-primary li a:visited a:hover {
	color: #BBB; }

#menu-primary li.current-menu-item a {
	color: #000; }

/* Sub Menu Coloring */
#menu-primary li li a {
    font-size: 1.166666666666667em;
    text-transform: uppercase;
    color: #BBB;
    margin: 0 5px 0 5px;
    padding: 12px 12px 12px 12px; }

#menu-primary ul li a:hover,
#menu-primary li ul li a:hover {
    color: #BBB; }

    Will update when/if I’m able to figure it out :)

  • Unknown's avatar
    danceflooreduk · Member ·

    Thanks a lot for your help, really appreciated, I’ll keep my eyes peeled for your update!

    Unfortunately though the line still exists between options in the drop down menu…

  • Unknown's avatar
    thesacredpath · Member ·

    To remove the lines in the submenus, add the following to your custom CSS. 

    .main-navigation li li {
  border: none;
}
  • Unknown's avatar
    lastfarthing · Member ·

    @thesacredpath, I already posted that. Apparently it didn’t work

  • Unknown's avatar
    thesacredpath · Member ·

    @lastfarthing, I just tried the code in the user’s customizer, and it did work. @hollyandthehotrods, can you try adding the above code again?

  • Unknown's avatar
    danceflooreduk · Member ·

    It worked this time, how odd!

  • Unknown's avatar
    danceflooreduk · Member ·

    OK, since you guys are on such a roll, I’ve got one more thing…

    Do you know the code to change the colour of the widget titles (currently light grey)?

    Thanks so much all of you for helping, the menu looks far better now!

  • Unknown's avatar
    danceflooreduk · Member ·

    Oh, and make them italic (if possible)?

  • Unknown's avatar
    lastfarthing · Member ·

    @hollyandthehotrods,
    This should work for changing your widget background color and making them italic: 

    .widget  {
  font-style: italic;
	background: #BBB; }

.widget-title {
	font-style: italic; }

    Still no luck on the nested links highlighting issue yet.

  • Unknown's avatar
    lastfarthing · Member ·

    @hollyandthehotrods,
    Oh, sorry, I misunderstood you. Changing the just the color of the widget title and making it italic would be: 

    .widget-title {
font-style: italic;
color: #BBB; }
  • Unknown's avatar
    danceflooreduk · Member ·

    Ahhh, it’s not working…

  • Unknown's avatar
    lastfarthing · Member ·

    I’m sorry, I’m experiencing some lag here. I got cut off on that last post. 

    .sidebar
.widget-title {
font-style: italic;
color: #BBB; }
  • Unknown's avatar
    danceflooreduk · Member ·

    Unfortunately it’s still not working, not sure why…

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, the three widgets you have have a different selector, and one of them (facebook) is also a link, so we need the following. 

    .widgettitle, .widgettitle a {
font-style: italic !important;
color: #35df17;
}
  • Unknown's avatar
    danceflooreduk · Member ·

    Geniuses, the lot of you! :D

    OK one more! Can I get rid of the lines above my social media widgets at the bottom of the page?

1 2
  • The topic ‘Oxygen main menu to be italic, a specific colour when normal and active and more’ is closed to new replies.