Docs

[artsomatic]

Hello,

I just switched my X theme to Ethos-1 and am looking for a solution to fix the appearance of single posts:

The post layout is setup (I assume by default) to have no space between the navigation bar and the post, so that the image on each post is “glued” to the navbar.

I’d love it if I could add some padding between them. Assuming it is done via Custom CSS, what would be the code necessary for that?

Could you please suggest a few solutions if they exist?

I also want to get rid of the scroll buttons next to the Post Title.

And there is a weird grey bar covering the post title and the audio navigation elements in the Audio Post Type. I am wondering if I can fix that as well.

Thanks a lot for responding
Vitali

This is how my website post looks like

[Paul R]

Hi Vitali,

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

.single-post .x-main.left .hentry .entry-featured {
    margin-top: 0;
}

.single-post .entry-header .x-nav-articles {
   display:none;
}

.single-post .x-audio.player {
    clear: both;
    margin-top: 20px !important;
    display: block;
}

Hope that helps.

[artsomatic]

HI Paul,

Thank you for your reply.

Yes, that helped removing the extra elements, but still I can’t change the position of the post title relative to the navigation bar. The title gets covered by the main menu. I have tried changing the numbers in the code you provided but it didn’t change anything graphically.

The screenshot attached.

Am I missing something?
Thanks

[Rue Nel]

Hello There,

Thank you for the updates! To resolve this issue, please go to your customizer, Appearance > Customize > Header > Navbar and adjust the “Navbar Top Height (px)”. You’ll be needing to insert at least 110 pixels. If needed, you can also align your menu by increasing/reducing the “Navbar Top Link Alignment (px)” in the Appearance > Customize > Header > Link – Alignment.

Hope this helps.

[artsomatic]

Raul, thanks for suggesting the solution above, but that just did nothing to fix my problem. When I adjust the height of the navbar the post title is being moved with the bottom edge of the menu, as if it is glued under the menu. Still part of the post title is covered by the navbar.

I’d assume it has to do with the single post settings, am I wrong?

And one more thing: I have noticed this weird ‘hidden title’ issue disappears when I zoom in or zoom out my browser window. It affects only 100% and 90% views. Both – in Firefox and Chrome.

Thanks again for helping
Vitali

[Christian]

Hey Vitali,

The issue is not happening on my end. Please clear your browser history and check again. The issue before was caused by small Navbar Top Height and also your menu gets below the logo because there are lots of menu items therefore making it long. Zooming out makes the logo and menu stay in one line so you will not see the issue.
Hey there,

This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principal applied to filling up a room with furniture—there is only so much that can fit into a given space. The following should be considered in these situations:

• Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
• Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
• Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
• Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
• Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

Thanks!

[artsomatic]

Christian, thanks for your suggestions, but I am actually not finding them very helpful.

I want my website look exactly how I want it to look. With as many items in the menu as I want.

I understand that the logo was pushed by the menu – that wasn’t my question. I simply wanted to find a solution for adding a padding to the top of the post title. Sounds simple …

IMHO, the whole reason to buy a premium theme is to have flexibility with design and to be able to do things the way you want.

Anyhow, I have found a solution. I have added a custom css (slightly different from the proposed code by Paul above.

.single-post .entry-header {
margin-top: 60px;
}

This seem to work just fine.
Thanks anyway,
Vitali

[Lely]

Hello Vitali,

Glad this is now sorted out. We’re sorry for the misunderstanding.
Please don’t hesitate to open a new thread of you still have issues and we will be happy to guide you.

Cheers!

[artsomatic]

Thank you, Lely. No worries 🙂 I appreciated quick responses and I understand there are a lot of us looking for solutions, so it is easy to think there is “one size for all” 🙂

[Nico]

Feel free to ask us again.

Thanks.

[Author]

Posts