Header and menu customization

Vicuko

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

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;
}}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Vicuko

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

This css should fix it all, 

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Vicuko

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

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next