Blog Page and Single Posts Headers Cut Off/ Icon Stack

Hi,

I was assisted in making adjustment to my theme because the uber menu would not stick to the top of my pages. Everything looks great except the blog page and single posts pages. Is there an option to adjust the code so it continues to work on all pages without affecting the blog at all? Here is the previous post. Uber Menu Not Sticking to the Top ICON

Hello @fantasy_5,

Thanks for posting in!

I have checked your site and it seems that in Appearance > Customize > Additional CSS, you have added this custom CSS which has affected all the site pages.

body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: 0px;
    }

You may need to add additional code like the example below to increase the height of the navbar for at least 100px on the blog and single post pages.

body.x-navbar-fixed-top-active.blog .x-navbar-wrap,
body.x-navbar-fixed-top-active.single-post .x-navbar-wrap{
        /* your styling height here */
    }

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You must maintain any custom coding to ensure it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

Thank you so much. Something else I noticed is related posts at the bottom of the single posts pages are not appearing and when you get to each single post the navigation arrows also do not appear. Additionally if you use the default page setting and add a sidebar widget the widget scroll from left when you mouse over it. It’s not fixed and does not conform to the shape of the widgets . How do I fix this? Here is an example of the default page with the sidebar. https://www.keianienterprises.com/sitemap/

Hey @fantasy_5,

There is no related posts at the bottom of the single posts when using the default Icon stack template. There is no next and previous post links as well.

  • You can check the example Icon post in the secure note below

Since you are now using the Pro theme, you can create a custom Single layout that will include the single posts and the post navigation. You can even create a sidebar too. Please check out these documentations for your reference on how you can create your own custom single post layout:

Hope this helps.

Hi, @ruenel

There have always been related post at the bottom of the blog in the original theme setup (X). There were also arrows above the posts that allowed navigation between previous or next post and also blog home if my memory serves me correctly. I did a test and did a backup restore from one month ago and took a screenshot of the related posts. Is it possible you can assist me in getting it all back? I also used template layouts (Pro) yesterday and they installed, but still no directional arrows to go in between posts or related posts or home option. That is usually a default with all of the blog setups so its pretty weird that it’s missing.

Hello @fantasy_5,

I have checked the previous version of your site here:

I found out that you are using the JetPack Related Post. Please log in and set up it again. Be advised that this is a 3rd party which we do not have any control.

Kindly let us know how it goes.

Hi, @ruenel

Thanks so much for that. I was also able to add the breadcrumbs back in the theme options. I was also able to remove them from all pages accept the main blog posts page using example .page-id-236 .x-breadcrumb-wrap { display: none; } Is there a way to remove them from the main blog posts page? The code above only worked for regular pages.

I would also like to know if there is a way to move or reposition them below the single posts title and author line for every single post only? I don’t want them on the main posts page at all. They look great on the single posts but appear above the titles by default. Lastly, I would like to remove the line that appears by default above and below the breadcrumbs.

Here is what I’m referring to on the main blog posts page about the breadcrumbs.

Hey @fantasy_5,

You can modify your custom CSS:

.page-id-236 .x-breadcrumb-wrap { 
   display: none; 
}

by adding the single post with the following:

.page-id-236 .x-breadcrumb-wrap,
.single-post .x-breadcrumb-wrap { 
   display: none; 
}

If you want to move or reposition the breadcrumb, you will have to edit the default template and add it to your child theme.

Please check these old threads first:

Kindly let us know how it goes.

Hi, @ruenel
I tried that code and it actually removed them from each individual posts pages, but I want to leave them there. How do I remove the breadcrumbs from the main posts page that shows all the posts on a single page? I’m not sure if it’s called the archives page, but this one. https://www.keianienterprises.com/blog/

Thank you for the update. The breadcrumb is no longer visible on the blog overview page when we checked. Did you figure this out?

If you need more help with this type of modification, you can avail yourself of our One service.

Best regards.

Hi, @Ismael

No, I temporarily turned the crumbs off because I was doing something else on the website. I still need assistance if you can help.

Thank you for the update. Please enable the breadcrumbs again so we can check the element. In the suggested css code above, you may need to replace the selector .single-post with .blog.

Hi, @Ismael

Changing it to .blog actually did the trick. Thank you. Lastly, is there a way to adjust the white space that’s above the breadcrumbs on the single posts page only. That is the only place I have them displayed.

I would like to move them down a bit. They are too close to the menu bar. I appreciate your help.

Hey @fantasy_5,

Somewhere in Appearance > Customize > Additional CSS, you have added this custom CSS:

.x-navbar-fixed-top-active .x-navbar-wrap,
.x-breadcrumb-wrap {
    margin-bottom: 0;
}

Copy that code and get the one specific class of the breadcrumb and add a top margin of at least 6em. For example;

.class-of-the-breadcrumb-should-be-here {
   margin-top: 6em;
}

And you will have something like this:

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You must maintain any custom coding to ensure it will still work after any updates or does not create any issues or incompatibility in the future.

Kindly let us know how it goes.

Hi, @ruenel
That did the trick. Thanks so much for all of your help.

Glad we could be of help! Please feel free to open another thread if you have more questions. Have a nice day.