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


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


Please sign in to leave a comment.
Powered by Zendesk