[Jaime MParticipant]

Hi,

I created a top gutter navigation to appear next to the social icons on Integrity Light theme.

I have custom css to make the menu items I added there float right against the social icons. it displays properly on the home page and blog main page, but on all other pages all the links and social icons are centering.

I want them to stay right justified on all pages, and then responsively center when browser size gets too small (i.e. tablet), which is how the homepage works.

Thanks!

[Jaime MParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please see the attachment, they appears fine on my end. it could be caching issue, please clear cache and check again.

Hope it helps.

[Jaime MParticipant]

Hi, sorry I was out of town without internet for a week.

As you see in the screenshot you posted, depending on the size of your screen, the top gutter nav is centering or it’s floating to the left on most subpages and posts. I want it to stay floating to the right, like it does on the homepage. Thanks!!

[JadeModerator]

Hi Jaime,

Please update this code:

.x-topbar-inner.x-container.max {
    max-width: 600px;
    width: 100%;
}

to

.x-topbar-inner.x-container.max {
    max-width: 600px !important;
    width: 100% !important;
}

Hope this helps.

[Jaime MParticipant]

funny when it’s such an easy fix!! Thank you 🙂

[Jaime MParticipant]

Ok it’s fixed on all pages BUT still centered on blog post pages… any idea why? or what to do?

[FriechModerator]

Hi There,

Its in the right side on my end. Please clear your browser’s cache.

http://prnt.sc/ensu4n
http://prnt.sc/ensu0r
http://prnt.sc/ensvcy

Thanks.

[Jaime MParticipant]

I did clear my cache. I’m talking about the actual post pages, not the main blog page. Top gutter nav is centering instead of floating right.

http://prnt.sc/eo26ji

Thanks!!

[FriechModerator]

Hi There,

Sorry about that, this was the code that is affecting the topbar.

.post-template-default.single-post .x-container.max {
    max-width: 980px !important;
}

Lets make that code more specific so it won’t affect the topbar, please update that to this:

.single-post .x-container.width.offset {
	max-width: 980px !important;
}

Thanks.

[Jaime MParticipant]

Yay! Thank you so much.

Ok so final thing hopefully…

Since we updated the custom css for the top nav display, the mobile display for my site changed. I’m not sure if it’s related or randomly happened at the same time?

See the screenshots:
http://prnt.sc/eoo4w6
http://prnt.sc/eoo58i

My mobile display was all perfectly displaying but past two days it suddenly changed to showing background images when before they were hidden, or showing images and buttons too large.

Also there’s an extra nagivation bullet list that wasn’t there before at the top and the footer now displays funny.

Any idea what happened? Or do I need to roll back to a previous backup?

[Rue NelModerator]

Hello There,

Thanks for updating in! The issue could be just a site cache issue. Please login to your CloudFlare account and totally flush your site cache.

Please let us know how it goes.

[Jaime MParticipant]

Ok great, seems to be displaying fine now. Thank you!!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts