Sticky Header Not Centered After 13.2 Update

newskywebsites · May 2016

Hi there,

I just updated to BeTheme 13.2 (using WP 4.5.2) and the sticky header is no longer centered when scrolling down a page. It's not left aligned. How do I fix that? Site is http://snellersnowsystems.com

Thanks!
Dawn

newskywebsites · May 2016

PLUS I just noticed that the sticky header doesn't show up on all pages. It's NOT showing up on these pages:

http://snellersnowsystems.com/snow-removal-mi/ (and all subpages under this one)
http://snellersnowsystems.com/landscaping/ (and all subpages under this one)
http://snellersnowsystems.com/blog/

Thanks!

Dawn

Albert · May 2016

Hi,

to center menu items in sticky header, you need to use and extra css:

#Top_bar.is-sticky .menu_wrapper { width: 80% !important; }

In reference to 2nd question, sticky header mat do not work on some pages because of custom layouts.

newskywebsites · June 2016

That centers the top nav links, but not the logo. This worked perfectly before the update without CSS, do I really need to add CSS to this? Shouldn't my site look the same even after updating the theme to 13.2?

Thanks,
dawn

newskywebsites · June 2016

I just updated to 13.3.1 and still doesn't work like it did in the past.

Albert · June 2016

Yes, you really need to do this. We have no idea what you did before the update and how does not work but we didn't changed anything and there was never any possibility to center menu items in sticky. So we really don't understand how you had it done before.

newskywebsites · June 2016

Okay, can you provide different code then? As I said, what you gave me centers the top nav links, but not the logo.

Another option I'm open to if the logo can't be moved is to have the logo stay on the left, but right align the top nav links... is that easier?

Thanks,

Dawn

Albert · June 2016

Sorry but we don't have other css. The code we gave you above is the only one that works for sticky header and this is the only one you can use. To center logo and menu, it is necessary to modify theme files.

newskywebsites · June 2016

What about making the logo left aligned and the links right aligned then? I can't imagine people are fine with a sticky header only being left aligned...? It looks terrible on a large screen...

Albert · June 2016

The css we gave you above is centering menu items. So or you can have them left aligned or centered. However, sticky header does not work now so we can not check if it's possible to keep logo on the left and align menu items to the right.

newskywebsites · June 2016

I don't know what you mean... "the sticky header does not work now..." ?

Albert · June 2016

It means that you have no sticky header and we can not have a look on it and check if it's possible to align menu items to the right.

newskywebsites · June 2016

Nothing has changed with the sticky header. It still works from every browser on my devices...? This is very confusing. url: http://snellersnowsystems.com/

Albert · June 2016

Yes, this time it was but recently wasn't. So to move menu items in sticky header to the right side, please use the following css:

#Top_bar .menu_wrapper { float: right !important; }

newskywebsites · June 2016

Okay, I know I'm like a bad cold that won't go away, but I haven't done anything to the site and now I see that the sticky header is gone in Firefox, while it is still there in Chrome (and now is right aligned like I wanted thanks to your latest response - thank you).

Here is all my CSS (I'm not a coder, just a copier of whatever your team tells me to paste into place). I don't know much about CSS, but I'm thinking there might be conflicting code here? Can you please take a look and let me know what should be deleted?

.header-transparent #Top_bar:not(.is-sticky) { top: 30px !important; }

.header-transparent #Top_bar .menu > li > a:after { background: #0a94d6; }

#Top_bar .menu > li > a span:not(.description) { letter-spacing: 1px; }

.flat_box .desc_wrapper h4 {

font-size: 22px;

line-height: 32px;

color: #0a94d6;

}

#Header .menu > li { display: inline-block; float: none;}

#Top_bar .menu_wrapper { text-align: right; width: 100%; }

#Top_bar .top_bar_left { width: 100% !important; }

.header-stack #Top_bar .top_bar_right { display: none; }

#Top_bar.is-sticky .menu_wrapper { width: auto; }

#Top_bar .menu_wrapper {

float: right !important;

}

Albert · June 2016

But it works in FF as we did checked it already on few different computers.

newskywebsites · June 2016

Is someone able to check the code I sent?

Thanks,
Dawn

Albert · June 2016

We saw it and we do not see anything wrong there. However, if you want to check the code in different aspects and browsers, you supposed to contact with your web developer because in reference to Item Support Policy, such customization services are not included.

Sticky Header Not Centered After 13.2 Update

Comments