Boxed Header Navigation

3 replies · opened Nov 18, 2020

TtentacledesignNov 18, 2020

Hi! Is there a way to make the navigation boxed but keep the rest of the page flexible? I saw you had some code like below as a solution but not sure how to use it or if it still works.

body.device-xl:not(.stretched) #header.sticky-header #header-wrap {
width: 1220px;
left: 50%;
margin-left: -610px;
}

body.device-lg:not(.stretched) #header.sticky-header #header-wrap {
width: 1000px;
left: 50%;
margin-left: -500px;
}

I also tried removing the "stretched" class below but then the whole page is boxed.

<body class="stretched">

Thanks for any help.

TtentacledesignNov 18, 2020

Oh, maybe I found it. I removed the "full-header" part and it seemed to work. Is that the best way to do it?

Thanks

<!-- Header
============================================= -->
<header id="header" class="full-header" data-sticky-class="not-dark">

SSemicolon WebSTAFFNov 18, 2020

Hello,

That's correct! Removing the .full-header Class from the #header Tag will make the Header Boxed.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

TtentacledesignNov 19, 2020

Perfect. Thanks!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard