Widen Action button area ?

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



Thanks.

     border-color: transparent !important;
     background: url(https://cdn.doordash.com/media/button/209x45_red.png)no-repeat center bottom;
     height: 50px;

Comments

  • 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?
  • 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
  • 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?
  • Of course you can target only the non-sticky menu, CSS5 allows to use the :not() selector.
    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
Sign In or Register to comment.