Is it possible to have rounded corners on the header nav bar and space either side of it?

[core365]

Hi, I don’t if it’s possible, but I’d like to have rounded corners on the bottom left and right of the header nav bar and for it to be about 85% width of the full page and to be centred. I’ve done a rough mock up and attached it below!

I’ll put the URL in a secure note as it’s being built on a temp link.

Thanks!

[jade]

Hello @core365,

Adding this code to the Global CSS should do it:

.x-navbar-wrap .x-navbar {
    max-width: 1300px;
    margin: 0 auto;
    border-radius: 0 0 40px 40px;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[core365]

Hi @Jade,

That’s perfect!

Thank you so much, I really appreciate it!

[jade]

You’re most welcome.

[core365]

Sorry, just one more thing! Is there anything that can be done so that the social media icons in the topbar are in line with the end of the navbar, as it keeps changing depending on the screen size! I’ve tried to add in some CSS, but it still has the same problem of it keep moving, whereas I’d like it to be aligned to the same point as the end of ‘Contact Us’.

Here’s a screen grab showing it not lining up.

Thanks!

[christian]

Hey @core365,

You have modified the Topbar’s design which complicates the header layout. Specifically, you have this code.

.x-topbar {
    position: fixed;
    width: 95%;
    text-align: center;
}

I’ll show you how to align but only at a certain point. You need to change that with this code.

.x-topbar {
    position: fixed;
    width: 86%;
    text-align: center;
    transform: translateX(-50%);
    left: 50%;
}

This would be the result.

It will not be perfectly aligned in large screens.

You’ll have a problem with standard screens.

Works OK in tablet.

Broken again in mobile.

As you can see, that will need a lot of fixing with custom code and it would require further custom development to fix that. You’ll need to hire a third-party developer if you wish this to be fixed with further custom code.

Or better yet, please upgrade to Pro theme so no custom code would be needed and we can help you achieve that header design.

Hope that helps and thank you for understanding.

[core365]

Hi @christian_y,

That’s great, thank you! I appreciate the screen grabs of it at different screen sizes too.

Thanks for your help!

[jade]

You’re welcome, @core365.