Boxed version as shown in preview image

lapremedia

Dear,

I want to change the header to the one in the preview image on Themeforest (see attached file), I'm running a clean version of this theme. No modifications to css files.

I tried the following and it works on dekstop not on mobile;
------------
#header{
background-color: #fff;
width: 1160px; ** this was 100% **
margin: 0 auto; ** added margin **
top: 0;
left: 0;
right: 0; ** added right **
z-index: 1505;
box-shadow: 0 0 12px rgba(0,0,0, 0.09);

}
------------

Though this doesn't realy work;

- Desktop version works
- But not on mobile devices, the header won't go responsive (rest of page is, like the slider) just not the header. With top header bar and social icons. Because the width is set to 1160px.

Thanks for the help. I don't use fixed header (scrolling with the page).

Air

Hello

This screen shot you have posted is rather mistake, as we don't have such design of header in theme. I will ask Daniel to remove it. Sorry for confusion.

Also you won't achieve such look as there is lot of control of header in JavaScript, and other problems to get it this way. That is why we decided it will be full width even in boxed layout.

This screen shot is unfortunately wrong.

With regards.

lapremedia

Thats a bummer, realy. I bought this theme thinking that layout was one of the options in the admin panel. I don't like the full width menu look it's taking too much of the page.

Look at my short piece of code, isn't there a way to add an extra piece of css to make this work?

Air

lapremedia found a solution for this case when you are not using fixed version of header. It will be probably added to theme if possible.

You have to add such custom CSS to make it work:

#header{
    max-width: 1160px;
    right: 0;
    margin: 0 auto;
}

With regards.