Elemement CSS custom

I need to add to color with opacity to and element back ground box.
Like the menu background for the entire box. I can change the the background color behind menu items but don't see away to extend the color across the entire page.
On your forum at https://premium.wpmudev.org/forums/topic/try-to-change-background-color-of-fixer-theme-navigation-menu
suggests to look at https://premium.wpmudev.org/forums/topic/try-to-change-background-color-of-fixer-theme-navigation-menu
Here it says Click 'Add New Style' in the Element CSS Styles panel
Where is this Element CSS Styles panel located?
I can only find Custom CSS and Preset CSS

  • Adam Czajczyk

    Hello Ben,

    I hope you're well today and thank you for your question!

    Since that forum post Upfront has significantly evolved. The idea of the solution, in terms of CSS, would be the same then, though the application would be a bit different. The steps would be:

    1. click on a menu element
    2. enter "Settings" by clicking on a gray "gear" icon
    3. in Upfront panel on the left expand "Appearance" section
    4. in "Choose or Create Preset" create a new preset
    5. use "Edit Preset CSS" option
    6. click on "Menu Bar" button from "Available element selectors

    7. put a CSS rule into editor between brackets { }, for example

    background:rgba(134,234,233,0.5);

    where first three values is a color in RGB format and the last one is opacity value.

    I hope that helps!

    Best regards,
    Adam

  • Ben Smith

    I went into Custom CSS and found:
    [data-style='horizontal'] ul.menu, div[data-style='vertical'] ul.menu[data-style='horizontal'] ul.menu, div[data-style='vertical'] ul.menu[data-style='horizontal'] ul.menu, div[data-style='vertical'] ul.menu[data-style='horizontal'] ul.menu, div[data-style='vertical'] ul.menu[data-style='horizontal'] ul.menu > li.menu-item a, div[data-style='vertical'] ul.menu > li.menu-item a[data-style='horizontal'] ul.menu > li.menu-item a, div[data-style='vertical'] ul.menu > li.menu-item a[data-style='horizontal'] ul.menu, div[data-style='vertical'] ul.menu[data-style="horizontal"] ul.menu, div[data-style="vertical"] ul.menu {
    background: transparent;
    And change the end to :
    background: rgba(0, 0, 0,.5)
    This works only as wide as the region is.
    How can I make the menu background color extend to the edges of the page?
    Maybe, Extend the Region width?

  • Adam Czajczyk

    Hello Ben!

    Thank you for your response and for explaining on what you wish to achieve. I took a look at your site and I believe you wish to affect the color of all the "header bar".

    In that case you will want to edit "region" that the menu is placed on instead of the menu element. Therefore you would want first to create a new region at the top of the page (above all other regions) and put your menu there. Then click on "Edit background" triangle icon in top-right corner of that region, select "Settings" green gear icon and use "Edit Region CSS" editor button to put CSS rule the same way as previously.

    If you set the region to be 100% wide it should do the trick.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.