Widht header section

[glutzkommunikation]

Hello Flexform-Team

On our webpage we have chosen the Boxed Page Layout.
Now we try to change the header width to 1170px (width of the page content).

The following custom css-code works but unfortunately influences the Responsive-function.

#header-section {
margin:0 auto;
width:1170px;
}

Can you give me an other solution to change the header width so the Responsive-function still works?

Attatched I send you a screenshoot without custom css-code.
It would be perfect, when header and page content both have the same width (space between the green lines)

Thank you very much.
Achim

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Please test and replace the width with this:

width: 100%
max-width: 1170px;

Thanks.

[glutzkommunikation]

Hi David

Thank you for your very quick answer.
I’ve put the code in, but nothing happen…

Following my complete custom css:

#header-section {
padding: 0 0 !important;
border: none;
}

#header-section {
width: 100%
max-width: 1170px;
}

#logo{
width:400px;
float: 50px;
align: left !Important;
}

#nav-section {
top: 5px;
float:right; clear:left;
}

nav .menu ul{
background: rgba(255, 255, 255, 0.7);
border:0px;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;
}

nav .menu ul li{
font-size:16px;
font-family: Kameron;
font-weight: 300;
align:right;
}
}

Any idea what goes wrong?

Kind regards
Achim

[David Martin – Support]

Hi,

Change this:

#header-section {
width: 100%
max-width: 1170px;
}

To this:

#header-section {
width: 100%;
max-width: 1170px;
}

Thanks

[glutzkommunikation]

Hey David

Funny things happened…
I’ve put the correct code in:

—
#header-section {
padding: 0 0 !important;
border: none;
}

#header-section {
width: 100%;
max-width: 1170px;
}

#logo{
width:400px;
float: 50px;
align: left !Important;
}

#nav-section {
top: 5px;
float:right; clear:left;
}

nav .menu ul{
background: rgba(255, 255, 255, 0.7);
border:0px;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;
}

nav .menu ul li{
font-size:16px;
font-family: Kameron;
font-weight: 300;
align:right;
}
}

—

Take a look at the attached screen…
Now the whole header has moved ca. 30px to left.

Thank you for a new idea..
Achim

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hey,

No problem – you need the margin.

Ex:

#header-section {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

Thanks.

[glutzkommunikation]

Good Morning David

I’ve copied the code in and… it works…!!!
Thank you very much for your help.

One last question for this thing:
When we want to use this look for tablet and mobile view…
is there any way to solve it with also with custom css?

Thank you and have a nice day
Achim

[David Martin – Support]

Hi,

Your header already works on mobile? Please add a screenshot to annotate what you mean.

Thanks.