Detailed change of style of Main menu on desktop

  • Author
    Posts
  • #164227

    drstavrov
    Member
    Original poster

    Hey again, Taras,

    Since I’ve been doing little upgrades on my website I focused on the main menu viewed from PC. I noticed that menu style is different if the menu has a submenus or if it has not. I would like to change the CSS style to be the same for all menu items.

    1. For all of the main menus – I would like the style to be the same for all, no matter if they have submenus or not. Just to get dark green background on hover – like “Естетична дерматология”, “За нас” end etc. (i know that you are ukrainian and u can manage with this :)).

    2. Main menus that have submenus have different style – they are with green backgroud and go a little bit more dark on hover. I would like to see them just as the main menus – with white background on static, and getting dark green when hover, just like the main menus.

    I took a look over an old topic: (https://premium-themes.forums.wordpress.com/topic/changing-colors-of-menu/) but as far as I can understand, I have to make the changes on every class, and every link has its own class.

    Is there a way to change the style with CSS, which reffers to all the menus and submenus.

    Really hope that you can understand it from my bad english.

    Sorry to hear that themes aren’t avalable on WordPress anymore, I really hope that I can use your precious support like I’ve been using it so far.

    Thanks a lot!

    The blog I need help with is: drstavrov.com

    #164230

    tarasdashkevych
    Theme Author

    Hello Konstantin,

    “… For all of the main menus – I would like the style to be the same for all, no matter if they have submenus or not …”
    – Sure. Please add this custom CSS to your site:

    
    /* change background color of menu links without a sub-menu */
    #site-navigation >.nav-bar>li:hover > a {
      background-color: #387a69;
      color: #ffffff;
      border-radius: 4px;
    }
    

    “… Main menus that have submenus have different style – they are with green backgroud and go a little bit more dark on hover …”
    – To change colors of the sub-menu of your primary menu, please use this custom CSS:

    
    /* change sub-menus colors */
    #site-navigation ul ul {
      background-color: #ffffff;
    }
    
    #site-navigation ul ul a {
      color: #333333;
    }
    
    #site-navigation ul ul li:hover > a {
      color: #ffffff;
      background: #387a69;
      border-radius: 0;
    }
    

    “Really hope that you can understand it from my bad english.”
    – Your English is good, no worries :) And, you always post descriptive support queries which is very helpful to provide a solution. Thank you for this.

    Please let me know if you have any additional questions.

    Warm regards,
    Taras

    #164233

    drstavrov
    Member
    Original poster

    Hey Taras,

    Great support as always! Worked smooth. One more little detail – submenus that have submenus have white arrow, which is not visible on white background. Is there a way to change the color of this arrow as well?

    Thanks!

    #164236

    tarasdashkevych
    Theme Author

    Hi Konstantin,

    “Is there a way to change the color of this arrow as well?”
    – Sure. Please also add this custom CSS to your site:

    
    #site-navigation ul ul li:not(:hover) .arrow-icon {
      color: #333333;
    }
    

    It should change the color of the arrow in sub-menus of the primary menu.

    Please let me know if there is something else you need help with in this section.

    Kind regards,
    Taras

    #164237

    drstavrov
    Member
    Original poster

    Hey Taras,

    Worked perfectly. Thank you so much once again.

    Kind regards,

    Konstantin

    #164240

    tarasdashkevych
    Theme Author

    Hi Konstantin,

    You are welcome. I am glad I was able to help :)

    Kind regards,
    Taras

The topic ‘Detailed change of style of Main menu on desktop’ is closed to new replies.