Widen Action button area ?

Comments

• scott74

  December 2019 edited December 2019

  Not sure if proper or only way but I had to make the text in the muffin options long enough as with width of the button I am using then make that text transparent.. Could not figure out any other way to just widen that area as needed. But this works for now. Let me know if there is a more better or proper way..

  
  

  
  

  #Top_bar a.action_button {

      top: -8px;

      margin: 0 5px;

      background: url(https://cdn.doordash.com/media/button/209x45_red.png)no-repeat center bottom;

      height: 50px;

      color: transparent;

  }
  
  Just looking to hide the navigation menu now only until you scroll then have it come back up.  Looking possibly to do with with not:sticky CSS?
• Pablo

  December 2019

  Hello,

  You made really great workaround for that - and as I think this will be solution is good because without CSS it's almost not possible.

  What I mean is, if you will not provide the text for the "Action Button" area, it will be automatically disabled to save space for menu.

  Also, providing the  static "Width" in CSS is not good too because script is calculating the width of all elements and changes the width of all of the elements to fit on screen, what you made is good, because the text in action button is almost the same as button and image will not be "cropped".

  
  

  If you have any other questions, feel free to ask.

  Thanks
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• scott74

  December 2019 edited December 2019

  Cool thanks., sound complex with the script and width /\ lol.. Is there a way to target only the non sticky nav menu...
  
  Like say you wanted to make the menu transparent but only until you started to scroll in which then the sticky CSS would take over with a background color?  Or am I overthinking this and selecting a different menu in the muffin options may take care of this?
• Pablo

  December 2019

  Of course you can target only the non-sticky menu, CSS5 allows to use the :not() selector.

  https://www.w3schools.com/cssref/sel_not.asp
  

  Example of that code in BeTheme:
  

  #Top_bar:not(.is-sticky){/*CSS CODE*/}

  
  You can also create another header for this menu, but if you don't have to display other menu items than the primary menu, you shouldn't use it.

  Thanks
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next