Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 22, 2016 at 8:00 pm #570295
    alfpress

    — > EDIT : Changed my Original Question <–

    I solved a previous question about how to create a highlight to a Menu Heading when either it or “Child” menu items are selected :

    FOR OTHERS, The following will help you create a menu highlight or text modification if you click on a Menu Heading or Subheading of a Menu :

    
/* === CHANGES HIGHLIGHT BACKGROUND COLOR OF SELECTED MENU ITEM --- */
 .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a {
font-color:white !important;
background-color: #ededed;
border-style: solid;
border-color:red;
border-width:2px;
} 

/* ===== Changes TEXT or BOX COLOR TO MENU WHEN MENU ITEM (child or parent) is selected ==== */
.current-menu-ancestor > a {
font-color:white !important;
background-color: #ededed;
border-style: solid;
border-color:red;
border-width:2px;
}

    My NEW QUESTION is a bit simpler I think, (hope)

    WHAT I WANT : I would like to have the Shop Menu heading, in my case simply called “Shop” stay highlighted when it or any child pages/categories/products are clicked.

    WHAT HAPPENS NOW:... when I click within the Shop … i.e, clicking through products within the Shop… the Menu highlight disappears… Any way to solve this ?

    • This topic was modified 8 years, 10 months ago by alfpress.
    January 25, 2016 at 4:37 am #571031
    alfpress

    the menu structure is something like this :

    Home
    About
    Shop
    –Product Category 1
    —Product Category 1A
    —-Product 1
    —-Product 2
    —Product Category 1B
    —-Product 1
    —-Product 2
    –Product Category 2
    —Product Category 2A
    —-Product 1
    —-Product 2
    — Product Category 2B
    —-Product 1
    —-Product 2
    -Cart
    -My Account
    – Checkout
    – Terms
    Contact

    • This reply was modified 8 years, 10 months ago by alfpress.
    January 26, 2016 at 5:30 am #571876
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    .woocommerce #menu-item-278 a {
    background-color: #454545 !important; 
    border-style: solid !important;
    border-color: #d4ed15 !important;
    border-bottom-style: none !important;
    border-width: 2px !important;
}

    Regards,
    Rikard

    January 26, 2016 at 6:18 am #571899
    alfpress

    Hi Rikard,

    It seems to work.. however, it ends up putting boxes around each sub menu…
    so.. now “Cart” , “My Account” , “Terms”, and “Cart” are all boxed in as well… and the color is changed for each of those submenus as well… so it kind of looks like a new menu.

    Is there a way to just apply the style only to the top level menu.. .. in this case “Shop” ?

    January 27, 2016 at 5:55 am #572591
    Rikard

    Hi,

    Ah ok, sorry. Please try this instead:

    .woocommerce #menu-item-278 a:first-of-type {
    background-color: #454545 !important; 
    border-style: solid !important;
    border-color: #d4ed15 !important;
    border-bottom-style: none !important;
    border-width: 2px !important;
}

    Regards,
    Rikard

    January 28, 2016 at 5:15 am #573475
    alfpress

    didn’t work.

    it still highlights the other menu items under “Shop”

    • This reply was modified 8 years, 10 months ago by alfpress.
    January 29, 2016 at 2:12 am #574232
    alfpress

    still looking for a solution to this... is there anyway to set a general condition.. .that if any products are viewed or if any categories are viewed, then the #menu-item-278 will be highlighted with the styling as below ? :

    #menu-item-278 {
    font-color:white !important;
    background-color: #ededed;
    border-style: solid;
    border-color:orange;
    border-bottom-color: #d9d9d9;
    border-width:2px;
    }

    January 29, 2016 at 2:14 am #574233
    alfpress

    I think I solved it !

    `.woocommerce #menu-item-278 {
    font-color:white !important;
    background-color: #ededed;
    border-style: solid;
    border-color:orange;
    border-bottom-color: #d9d9d9;
    border-width:2px;
    }

    February 1, 2016 at 5:09 am #575530
    Rikard

    Hi,

    Great, glad you found a fix and thanks for sharing! Please let us know if you should need any more help on the topic.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.