Docs

[DiamondAlexander]

Hi, Themeco! I could use your help with adjusting the layout of my blog page in Icon. I was able to find the answer to remove the scrolling feature which is great but I can’t figure out the search term or answer for my other question:

I would like for the sidebar to be below the navigation and header as opposed to on the same line as the navigation and pushing the logo to the left – if that makes sense? I am attaching two screenshots in my next message for visual reference and login information. I just want it to be more like a traditional blog where the logo/header area is up top and then the content and sidebar start below it.

Thank you in advance!
Diamond

[DiamondAlexander]

This reply has been marked as private.

[DiamondAlexander]

This reply has been marked as private.

[DiamondAlexander]

This reply has been marked as private.

[DiamondAlexander]

This reply has been marked as private.

[DiamondAlexander]

Looking at it again, it’s the same issue for individual blog articles as well, I’m guessing any code would target the sidebar layout itself but just wanted to see if it could fix it in both areas – the WordPress generated blog page and individual blog articles.

Thank you!

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed post information. To resolve your issue and push the sidebar to be align with the content area, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

@media (min-width: 1200px){
  .admin-bar.x-icon .x-sidebar {
    top: 229px;
    border-top: solid 1px rgba(0,0,0,0.075);
  }

  .x-icon .x-sidebar {
    top: 198px;
    border-top: solid 1px rgba(0,0,0,0.075);
  }
}

@media (min-width: 1380px){
  .admin-bar.x-icon .x-sidebar {
    top: 142px;
    border-top: solid 1px rgba(0,0,0,0.075);
  }

  .x-icon .x-sidebar {
    top: 111px;
    border-top: solid 1px rgba(0,0,0,0.075);
  }
}

We would loved to know if this has work for you. Thank you.

[DiamondAlexander]

Hi Rue, thank you so much! That just about fixed it, I’m just having a little issue with getting the logo and navigation to all be on one line.

I’ll send a separate screenshot.

[DiamondAlexander]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

@media (min-width: 980px) and (max-width: 1200px) {
.x-navbar .desktop .x-nav > li > a > span {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

Let us know how this goes!

[DiamondAlexander]

I found the easiest thing to do was just to switch to the Renew Stack. It ended up being the easiest solution for me. Thank you for your help!

[Joao]

Glad to hear it and thanks for letting us know.

Joao

[Author]

Posts