How to make header style "Stack: Center" sticky as is?

fmorakci · May 2017

Hi, please see the screenshot below. This is the website I'm working on right now with header style stack: center.
http://prnt.sc/f5x6wk

But the sticky header looks like this:
http://prnt.sc/f5x7kb

I would like to have the header fixed, as it is in the first screenshot with the logo above the menu.
Also, I would like to remove the border between the logo and the menu.
I've looked around quite some time but couldn't find a fix. Do you have a piece of CSS for this?
Thanks!

Bryan · May 2017

Hello,
If you want a fixed header go to theme options>header&subheader>header and select the fixed header style. Fot the custom css, please send a link to your page.
thanks

fmorakci · May 2017

http://anadyla.com

Bryan · May 2017

Here is the css for the border:

#Top_bar .logo {
	border:none !important;
}

fmorakci · May 2017

Thanks, but how can I keep the logo stacked in the center on top of my menu with header style fixed?

Bryan · May 2017

Please leave it as it is and add this custom CSS

#Top_bar.is-sticky #logo img.logo-sticky {
	height: 70px !important;
}
.header-stack.header-center #Top_bar.is-sticky .menu_wrapper {
	width: 100%;
}
#Top_bar.is-sticky .container {
	background:white !important;
}

fmorakci · May 2017

Sticky header logo is on the left... I can't get it to align to the center...

Bryan · May 2017

add this css as well

#Top_bar .logo {
	float: none !important;
	
}

fmorakci · May 2017

Thanks, you guys are amazing.

I have one last question and then I promise I'm working on my web development skills and won't bother you about this any more.

As you can see, the cart icon is on the right top corner in the sticky header. Is it possible to have this on the same line as the menu/navbar? If yes, can you instruct me on how to do it?

Bryan · May 2017

You can use this css

#Top_bar.is-sticky .top_bar_right {
    top: 60px !important;
}

fmorakci · June 2017

Hi, right now as you can see on anadyla.com, the sticky header does not center... It's like the shop and search icon on the top right acts as a margin and is excluded from the alignment. The logo and navbar do center, but it's a bit more on the left side instead of a perfect center. Any idea how to fix?????

Bryan · June 2017

What do you mean, how would the icons center?

fmorakci · June 2017

Please look:

Screen grab of full header.

http://prntscr.com/fi4pc4

Screen grab when sticky header:

http://prntscr.com/fi4pxy

You see? When sticky, the header is not exactly in the middle, it's more left.

Bryan · June 2017

Yes I see, but I also remember that we have changed this sticky header completly with custom css. This is why mega menu is ending there, and the logo is not centered. There is not much we can do there.

How to make header style "Stack: Center" sticky as is?

Comments