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

  • Author
    Posts
  • #2998851

    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 hollyandthehotrods.com.

    #2999147

    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 ;)

    #2999178

    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!

    #2999190

    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; }

    #2999198

    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?

    #2999209

    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 :)

    #2999213

    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…

    #2999215

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

    .main-navigation li li {
      border: none;
    }

    #2999216

    lastfarthing
    Member

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

    #2999219

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

    #2999220

    It worked this time, how odd!

    #2999221

    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!

    #2999222

    Oh, and make them italic (if possible)?

    #2999223

    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.

    #2999224

    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; }

    #2999225

    Ahhh, it’s not working…

    #2999226

    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; }

    #2999228

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

    #2999229

    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;
    }

    #2999230

    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?

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