Widen Action button area ?

scott74

Trying to widen this area without having to put in text in the settings because I am replacing with a button

https://www.loom.com/share/e9ea6cacb80b4ae8b45c5f9fe6803da7

https://staging2.threemargaritasfenton.com/about/

Thanks.

     border-color: transparent !important;

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

     height: 50px;

scott74

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

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

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

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