Header and menu customization

Vicuko · July 2017

Hi,

I would like to know how to do the following changes in the header and menu: http://spiraloftime.com

Reduce the header width; it is now wider than I would like it to be

Change the color of the sandwich menu; it is now kind of orange

Change the background color of the menu options when I open it; it is not transparent

When I reduce the size of the window, the header ends up only showing the logo and the sandwich menu, and the background turns brownish... I would like to be able to also customise the color of the header background for small windows/phones.

Thank you in advance.

Best regards.

Bryan · July 2017

HI,
1. the header width is the same as the content width, you can change the content width in theme options>global>general, under grid width
2,3. You can do that in theme options>colors
4. You can fix that using this custom css

@media (max-width:767px){
#Top_bar {
	background: transparent !important;
}}

Vicuko · July 2017

Hi,

1. I change the grid width but I do not see any changes on the header width.
2. Done!
3. I can't find what parameter I need to change in order to make the menu options NOT transparent.
4. Done!

Thank you in advance!

Bryan · July 2017

This css should fix it all,

.header-simple #Top_bar #menu {
    width: 330px !important;
    background:red !important;
}

Vicuko · July 2017

Hi,

What is this CSS code supposted to do?

Remaining issues are:

1. I change the grid width but I do not see any changes on the header width.

3. I can't find what parameter I need to change in order to make the menu options NOT transparent.

Thank you in advance!

Vicuko · July 2017

Hi again,

Now I see. The code is supposed to let me choose the menu background color.
However, this solution is not valid for me, as it blocks other options as "activating the action bar",... and if I "Save changes" in the BeTheme Options, the CSS is then ignored...

So again, remaining issues are:

1. I change the grid width but I do not see any changes on the header width.

3. I can't find what parameter I need to change in order to make the menu options NOT transparent.

Thank you in advance!

Bryan · July 2017

this css should be working all the time, paste it into theme options>custom css&js>css and delete browser cache to see the changes.

You can set the header to full width but only in the full width layout, not in boxed.

thanks

Header and menu customization

Comments