Menu Customisation

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #10370
    T4mT4m
    Member

    Hi, I was wondering if it’s possible to have just one element of my menu with a permanent block background colour that’s active all of the time? I’ve found in the theme settings the option for menu items to have a block colour background on hover which obviously effects them all, and only when they’re hovered over, but I’d like it so when the site is loaded just one menu item has a permanent block colour background that doesn’t alter and remains the same colour when the menu item is clicked or hovered. I’d also like to be able to change the colour of the menu text for just the one menu item too to make sure it stands out against the block colour.
    Thanks

    #10389
    VeenaVeena
    Moderator

    Yes,It is posssible using custom CSS.For that you have to specify the menu’s id.
    Foe eg: “account” menu

    li#menu-item-236 {
    background-color: #f0f8ff;
    }
    

    Pls make the changes accordingly.

    #10398
    T4mT4m
    Member

    Thank you, that worked perfectly! Is there a way to have the menu text a specific colour too, so all other menu items are the active and hover colours set in the theme options but for example ‘account’ has a different text colour of its own?

    Thanks,

    #10413
    VeenaVeena
    Moderator

    Pls use the below custom CSS –

    li#menu-item-236 a {
    color: #48a2e7 !important;
    }
    
    #10433
    T4mT4m
    Member

    Thank you! This question is probably quite predictable based on the above haha, but what css do I use to change the hover colour an an individual menu item? I tried a couple of different alterations based on the above css but didn’t have much luck trying to guess it.

    Thanks

    #10443
    VeenaVeena
    Moderator

    Pls add the below custom CSS

    li#menu-item-236 a:hover {
    color: red !important;
    }
    

    Also pls remove the “!important” from the below custom CSS that you have given earlier – it should be color: #96cebe;

    #primary-menu ul.menu > li.sfHover > a, #primary-menu > ul.menu > li > a:hover {
    color: #96cebe !important;
    }
    
    #10462
    T4mT4m
    Member

    I’ve worked it out! I cleared the hover colour in the primary menu theme settings area, then put

    #primary-menu ul.menu > li.sfHover > a, #primary-menu > ul.menu > li > a:hover {
    color: #96cebe;
    }

    into the custom css to apply the hover colours which stopped the individual hover colour from being overridden.

    If you look at my menu at the moment I have a full border around one menu item, and a bottom border under the ‘join’ menu item, is there a way to shorten that border or put more of a space between ‘join’ and ‘account’? as at the moment the borders are almost touching which looks a bit squashy.
    Thanks,

    #10469
    VeenaVeena
    Moderator

    Pls use the below custom CSS –

    li#menu-item-236 {
    margin-left: 15px;
    }
    
    #10476
    T4mT4m
    Member

    Brilliant that worked perfectly thank you! Is is possible to change the background colour of an individual mobile menu item, so make just account #48a2e7 in the mobile menu and keep the rest the green colour I’m using?

    Thanks,

    #10487
    VeenaVeena
    Moderator
    .dropdown-menu-wrap > ul.menu > li {
    background: #afceca;
    }
    li#menu-item-236 {
    background-color: #48a2e7;
    }
    

    Pls remove the background-color:transparent for the menu “join”.
    Also now your account menu’s background color and font color is same(blue), Kindly try to make changes accordingly.

    #10491
    T4mT4m
    Member

    Thanks for that css, that only seemed to change the main menu from a computer browser and I was looking to change just the menu that appears on mobile devices, making the background of account #48a2e7 on the drop down mobile menu, I’m not sure if this is possible though?
    Thanks,

    #10510
    VeenaVeena
    Moderator

    Pls use the below custom CSS –

    #mobile-menu ul li:last-child {
    background: #48a2e7;
    }
    
    #10521
    T4mT4m
    Member
    This reply has been marked as private.
    #10533
    VeenaVeena
    Moderator

    First you have to specify the corresponding mobile menu’s id/class name and then apply background property.
    Please see this post
    https://www.livemeshthemes.com/support/faqs/how-to-fix-a-few-styling-issues-instantly-using-chrome-developer-tools/

    Inorder to remove overlapping pls apply the below custom CSS –

    @media only screen and (max-width: 1200px)
    {
    #primary-menu {
    top: 10px;
    }}
    
    #10536
    T4mT4m
    Member
    This reply has been marked as private.
Viewing 15 posts - 1 through 15 (of 18 total)
  • The topic ‘Menu Customisation’ is closed to new replies.