Docs

[jkneitel]

Greetings! There is a bunch of extra space on my site between the header and the content. I would like to remove this. I’ve followed a bunch of other threads and the CSS didn’t do the job.

To be sure, I have a sidebar on all of my pages. The top of the sidebar is higher than the top of the page content. When I implement the custom CSS from the other threads, both the content and sidebar get shifted up. Can I shift only the page content up?

[Rupok]

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.

[jkneitel]

This reply has been marked as private.

[jkneitel]

Double-checking what I initially wrote, I now realize that there is space between the page title and the content. The sidebar fits under the page title appropriately, but the page content is too far down (and offset compared to the sidebar).

I’d like to have the page content fit under the page title without this space.

Also, and perhaps this belongs in a different thread, is there a way to center the page title across the page content only (and not over the page content and sidebar).

[Joao]

Hi

Would you mind provide a screenshot clarifying what you are referring to?

Thanks

Joao

[jkneitel]

This reply has been marked as private.

[Jade]

Hi there,

You can add this under Custom > CSS in the Customizer.

header.masthead.masthead-inline {
    height: 130px;
}

.x-main.left {
    margin-top: -35px;
}

Hope this helps.

[jkneitel]

That mostly works. Thanks.

This works well for desktop. However, for mobile, my menu items are actually listed (that is, the menu is not simply an expanding mobile menu button). The menu items come down a bit far below the bottom of the page logo. To get this to look right on mobile, I have to add a lot of height to the masthead. Yet, this looks really bad on the desktop.

For a workaround solution, is there a way to have my mobile menu items to be responsive. Where their font size gets smaller on mobile compared to desktop?

Thanks as always for your outstanding support!

[Christopher]

Hi there,

Please find and remove following codes :

.x-nav-wrap.desktop {
    display: block !important;
}
.x-nav-wrap.mobile, .x-btn-navbar {
    display: none !important;
}

And add this code :

.x-btn-navbar.collapsed,a.x-btn-navbar {
    color: #000;
}
a.x-btn-navbar:hover{
color:red;
}
a.x-btn-navbar:before {
    content: "Menu ";
}

Hope it helps.

[jkneitel]

That’s definitely not what I was after. I’d like to keep my menu items listed out on mobile (that is, I don’t want my menu to be a collapsed dropdown menu).

Can you please provide me with custom CSS that would make these menu items smaller on mobile? That would ideally include the WooCommerce shopping cart icon area.

[Rupok]

Hi there,

Thanks for writing back. That’s pretty unusual sine there is not enough space in mobile and it will be unredable. but if you still want; you can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 500px) {
.x-navbar .desktop .x-nav > li > a {
  font-size: 8px;
}
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[jkneitel]

Thanks. That worked very well.

I was able to get away with having the menu options listed out on mobile because I didn’t have that many menu options. They all fit across one line and look good using your CSS above (with a font size of 8.5). However, as the site expands I’ll have more options.

I’ll revert to the mobile menu. And I also used your CSS to adjust the spacing between the header and the page content. Thanks again!

[Joao]

You are welcome!

[Author]

Posts