Minimal Menu Background modification

adsmatias · February 2017

I'm having some problems on making my header image responsive to diferent screens since is not fixed or 100% width. I have tried adding it to the ccs code in many ways but im not geting any solution.

This is what im doing.

Muffin Options>Header&Subheader>Header> Classic Menu ( css code .header-classic)

This is the code I use for placing a background on my desktop web.
".header-classic #Top_bar { background: url(/2017/02/BG4.png);}"

I want to do the same on my footer and on my responsive menu.

The responsive menu I use is
Muffin Options>Responsive>Header>Layouts> Menu right l Left Logo

What is the css code I should use, and how do I do the background image responsive on different mobile dimensions.

Albert · February 2017

Hi,

we are sorry but we do not understand your question. Do you mean to set different background images for header and footer on desktop and mobiles?

adsmatias · February 2017

No.. I mean I want to place a background on my footer and header aswell as in the responsive mobile menu.

And I want to do all this by muffin CSS code.

I only know the css to change the Classic header is
.header-classic #Top_bar { background: url(/2017/02/BG4.png);

adsmatias · February 2017

When I open the web in an iphone 6, or lower dimension, the background of the menu dissapears.

I think this is because of the responsive menu.
The theme is playing all this.

Albert · February 2017

Please send us link to page where this happens so we can have a look on it.

adsmatias · February 2017

http://p-d-digital-canaria.es/
We are yet using dummy images while preparing the web.

Albert · February 2017

Ok, thanks. As we can see, you set this background using custom css but its being overwritten on mobile by our default background color because you forgot about !important declaration in your css. So instead of what you got now, please use:

.header-classic #Top_bar { background: url(http://publicidad-digital-canaria.es/wp-content/uploads/2017/02/fondo.svg) !important; }

adsmatias · February 2017

Oh!!

very impresive!
What is the funcion of "!Important"? Does it overwrites default muffin setting?

One last question, If I want to use the Stack: Center menu, insead of ".header-classic" what should I use.

Albert · February 2017

Yes, it overwrite default css.

All you need to do to set up Stack: Center is go to Theme options > Header & Subheader > Header section and activate the right header style.

adsmatias · February 2017

Hello again Muffingroup, how do I disable the default sticky trasparency by css.

Albert · February 2017

To remove default transparency from the sticky header, you need to use below css:

#Top_bar.is-sticky { opacity: 1 !important; }

adsmatias · February 2017

Me again,

I have change the color from [class="opening_hours"] with;

#text-11 .textwidget .opening_hours { background-color: #114F8B !important; }

But now it has a darker border arround.

-----------

I have also changed the action button color with;

#Top_bar .top_bar_right_wrapper .button { background-color: #3b5998 !important; }

But my hover color change is not working;

#Top_bar .top_bar_right_wrapper .button a:hover { background-color: #fffff !important; }

same url unedited.

Albert · February 2017

What's your question then?

adsmatias · February 2017

How do I remove (or change color) the border from "opening hours" and how do I edit hover color from the action button.

Albert · February 2017

Please send us link to page/s where you would like to do those changes because the link you sent above, does not work right now.

adsmatias · February 2017

http://publicidad-digital-canaria.es/

Albert · February 2017

To remove border color around "Opening hours" you need to use the following css:

#text-11 .textwidget .opening_hours { border: 0 !important; }

But to change hover color of Action Button, use:

#Top_bar .top_bar_right_wrapper .button:hover { background: #000 !important; color: #FFF !important; }
a.button::after, a.tp-button::after, button::after, input[type="submit"]::after, input[type="reset"]::after, input[type="button"]::after { display: none !important; }

adsmatias · February 2017

How do I add an Icon on the action button? facebook icon for example

Bryan · February 2017

To do that, go to 'BeTheme Options' -> Header & Subheader -> extras In the Action Button section, in the 'title' field type:

Replace the 'ICON_NAME' with the name of a specific icon you want, you can find the icons here:

http://themes.muffingroup.com/be/theme/shortcodes/typography/#icons

adsmatias · March 2017

Hello Muffin Support.

We are now on a different project. I would like to know how I can add a "button_icon" on the action Button. On the left part of the button "Pedidos". ( Icon l Pedidos )

http://machin.publicidad-digital-canaria.es/

I'm also searching how to add more action buttons on the same area of the header.

I would really appreciate if I can get this information on css.

adsmatias · March 2017

I want to add something like

<--- with my own custom icon or image

Pedidos</a>

Bryan · March 2017

If you want to add an icon to the action button go to theme options>header&subheader>extras and in the title field type your icon and the text for the button for example:

Buy now

This will create a button with a home icon and a buy now text.

There is only one action button. You cannot add more.

adsmatias · March 2017

Hello again, im doing this website and I would like to know how to stop sidebar for a full wide map and section.

http://dentistas-endodoncia.com/primera-visita/

http://dentistas-endodoncia.com like this one. (but it has no sidebar)

Bryan · March 2017

Hi,

This is not possible since the map is inside the content. Sorry

thanks

Minimal Menu Background modification

Comments