Canvas Support

Using the sticky header (medical template) in a fixed with container layout

1 reply · opened May 31, 2016

Qquarki69May 31, 2016

Dear Canvasians!

I love that theme, even though it is quiet wide-ranging and I try to pick out some of the elements and reduce it to the ones I really need.
So I changed the medical template to a fixed width (container not fluid) layout and only used the header, because of the sticky header function and how the logo behaves. (love that!)

Problem is, that if you scroll down the side, the menu sticks to the tup, but the menu (LI) elements move a bit to the inside. (Another 15px maybe?)
This does not happen on the original layout and I guess it might have to do with the container that now has been added and it now already is in; and it might move into an additional container. Can that be?

I badly need to get rid of this behavior. Please assist! :-D Thank you! :-)

SSemicolon WebSTAFFJun 3, 2016

Hello,

We have just checked out your Website and found some issues with the Markup:

  1. Firstly, make sure that all your Content is enclosed with the #wrapper Container as in the Default Templates.

  2. Secondly, the issue you are facing is because you have added a .container (inside Header) inside a .container Wrapper (just after the <body> Starts) which is why the Width does not get Calculated Properly.

Solution:

  1. If you wish to add the #wrapper you will then need to replace it with the Main .container Wrapper and then use the following CSS Code:
#wrapper {
	position: relative;
	float: none;
	width: 1220px;
	margin: 0 auto;
	background-color: #FFF;
}
  1. Else you can simply use the following CSS Code:
#header:not(.sticky-header) .container {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

This should definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

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