CSS Selectors:

Here are a few examples from the Shopify community who are using these very same CSS selectors to make their menus look awesome: 

 

Shomei Organic Skincare

FOVITEC

Blenders Eyewear

 

Here are just a few of the selectors that can allow for some awesome edits: 

Category Hover: 

#bacon-highway.bacon-menu.bacon-highway-menu .bacon-highway-main:hover {
     color: #fff !important;
}

Sub-category hover:

#bacon-highway.bacon-menu.bacon-highway-menu:not(.bacon-mobile) .highways>li .bacon-product:hover, #bacon-highway.bacon-menu.bacon-highway-menu:not(.bacon-mobile) .highways>li .see-all {
      color: #fff !important;
}

 

Top Border Radius Delete

#bacon-highway.bacon-menu.bacon-highway-menu.left-to-right:not(.bacon-mobile) {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-color: transparent;
}

 

Enable Scroll Bar - Limit Visibility (great for loads of products)

#bacon-highway.bacon-menu.bacon-highway-menu .highways {
    overflow-y: auto;
    max-height: 250px;
}

 

Disable Uppercase in Bacon Top Category. 

(For Left-to-Right Menu)

#bacon-highway.bacon-menu.bacon-highway-menu.left-to-right:not(.bacon-mobile) .bacon-highway-main {

     text-transform: lowercase;

}

(For Top-Down Menu)

#bacon-highway.bacon-menu.bacon-highway-menu.top-down:not(.bacon-mobile) .bacon-highway-main {

     text-transform: lowercase;

}

(For Stack Menu)

#bacon-highway.bacon-menu.bacon-highway-menu.stack:not(.bacon-mobile) .bacon-highway-main {

     text-transform: lowercase;

 

__________________________________________________________________

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk