Docs

[Josh H]

I’ve got two issues, both demonstrated in the screenshot.

I need to know how to eliminate the white border around all of the content. Even though you can’t see it, this border surrounds the header and footer elements as well.

I also need to know how to keep the “fixed top” header from resizing independent of the content as it is doing in the screenshot when you resize the browser window.

I’m pretty horrible at CSS, but I’m good at searching a forum, copy/pasting, then tweaking and watching the results. This means that the current Custom CSS on the site likely looks like a frankenstein-esque monster to professionals like you.. but just in case you want to cringe, here’s my CSS on the page already:

.nano { background: #202020; }

.x-navbar,
.x-colophon.top,
.x-colophon.bottom {
     background-color: #202020;
     color:#efefef;
}

.x-navbar .desktop .x-nav > li > a {
     color:#efefef;
}
.x-boxed-layout-active .entry-wrap
{
background-color: #202020;
}

[Friech]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[Josh H]

This reply has been marked as private.

[Thai]

Hi There,

Try adding following CSS under Customize > Custom > CSS:

.x-boxed-layout-active .site {
    border: none;
}
@media (min-width: 980px){
    .x-navbar.x-navbar-fixed-top.x-container.max.width {
        max-width: 935px;
    }
}
@media (max-width: 979px){
    .x-navbar.x-navbar-fixed-top.x-container.max.width {
        max-width: 100%;
        width: 100%;
    }
}

Hope it helps.

[Josh H]

Oh, man. So close… Now when you scroll down, the menu jumps to smaller than the site width. I’m thinking that this is because I’ve changed some stuff on the site since I was waiting for the reply. Though I don’t know much about CSS, I’m guessing this is because the “min-width:” and “max-with:” values were changed by me. I’m going to fiddle with these values and see if I can fix this myself so that I can learn a little bit. But I’ll let you know if I can’t figure it out on my own.

I got it.. But I can’t tell any difference when I change “min-width:”. What’s this value referencing?

Ok I thought I could figure it out but I couldn’t. Anyways, at this point I think I’m set on my site max width and site width % so I won’t be changing it and affecting your solution… (if that’s actually the issue with the solution you provided)

Thanks for the awesome support, as always.

[Friech]

Hi There,

Look for this styling on your custom css

@media (min-width: 1280px) {
	.x-navbar.x-navbar-fixed-top.x-container.max.width {
	    max-width: 1024px;
	}
}

And replace the 1024px value with 65.5%;

Hope it helps, Cheers!

[Josh H]

Unfortunately that didn’t seem to fix it. (Screenshot attached).

I’ll try to sum up my issue again, as it appears some things have been fixed.

When the page loads, everything looks perfect.

As soon as you scroll, 2 undesireable things happen:

1) The width of the navbar changes and does not match the site width
2) The site content immediately snaps to the top of the browser (which is behind the navbar), hiding some things like the page title and creating a jarring effect, as opposed to the smooth fixed topnav of your main demo at theme.co

Let me know what I should do to fix the issue. I’ll keep searching the forums in case you’ve already answered someone with a similar issue.

In the meantime, I’ve stacked the logo and navbar, made the logo bar transparent, and made the navbar static. I’d still prefer fixed navbar, though I’m fine with stacked header.

If it’s helpful to you to know: Issue #1 only happens when there is a sidebar present.

[Friech]

Hi There,

This is weird I couldn’t trace the issue, would you mind updating your Cornerstone first to the latest version (1.0.6). To make sure that this is not a compatibility issue?

Thanks!

[Josh H]

As I’m sure you’ll notice when you look at my site. I’ve been creating even more of a Frankenstein’s monster of Custom CSS on my site.

I managed to very crudely find a workaround to changing the mobile site break point (something I had not requested in this thread, but had trouble finding in my searches). Somehow, when I found that solution, it fixed Issue #2 for all instances that don’t use my janky solution for extending the mobile break point.

So to recap, the issues I still need help with:

When a sidebar is present: Everything works EXCEPT – after scrolling, the navbar resizes and no longer matches the site width

When the screen is under 979px (and thus using my janky navbar solution): Everything works EXCEPT – after scrolling, content below the navbar “snaps” to the top and is cut off by the nav bar.

***Just in case anyone happens to stumble across this post while searching for how to change the screen size before the menu switches to mobile, here’s my solution. It’s not elegant, and I can’t center the menu, but it’s good enough for me:

@media (max-width:979px) and (min-width:600px){
.x-nav-wrap.mobile.collapse {
display: block !important;
}
.x-navbar .mobile .x-nav li>a{
margin-left: auto;
float:left;
}
}
@media (min-width: 600px){
.x-navbar .x-btn-navbar {
display: none !important;
}
}

[Paul R]

Hi,

Thanks for sharing.

To fix the top being cut off, you can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
     height:80px;
}
}

Hope that helps.

[Josh H]

That did it. You guys are amazing.

[Paul R]

Thank you for your kind words.

Have a great day! 🙂

[Josh H]

I almost overlooked the fact that

When a sidebar is present: Everything works EXCEPT – after scrolling, the navbar resizes and no longer matches the site width

this is still an issue. Any thoughts? I’ve updated Cornerstone…

[Jade]

Hi Josh,

I have checked on your site and I can’t seem to see a page that got a sidebar. Would you mind pointing us to the page that you are describing so we can check it?

[Josh H]

That’s odd. On my end every page (except the individual product page – which I’m working on fixing) has a left fixed ICON STACK sidebar as long as the screen is large enough.

I’m in the process of CSS trial and error to try and learn some stuff, so it’s possible that at the moment you looked I had broken the site.

I’m pretty sure I understand WHY this is happening:

The navbar is set to a percentage of the screen width. When it doesn’t have a sidebar this isn’t an issue at all. However, once the sidebar is present, the site resizes to [screen width – sidebar width] while the navbar is still setting itself at a percentage of the total screen width. At least thats what it looks like is happening to me. I don’t know how to fix this though.

<EDIT>

Okay, so. My Site is basically set up pending 3 main bugs that I’ve yet to be able to figure out:

1.) I cannot get the Logo Bar to be transparent. I’ve tried using
.x-logobar { background-color: transparent;}
but this doesn’t seem to work as the logobar adapts the color of the container behind it (site, I’m assuming – since I have custom CSS that changes .site background-color). Normally I’d be okay with setting .site {background-color: transparent} and just filling in each section of each page with fill color, but it seems that makes woocommerce pages go transparent and I can’t easily edit those.

2.) I cannot get the Fixed Top Navbar to be the correct size when there is a sidebar present. The fixes that you provided work when there is no sidebar – but break when the sidebar appears at larger screen sizes.

3.) Individual Product pages on woocommerce will not display a sidebar. I’ve changed my blog archive settings to global but nothing seems to be working.

Could you help me with those three issues? I’m not going to touch my site anymore until I hear back from you so that I don’t accidentally change custom CSS before you can reply.

[Author]

Posts