Nav and top bar style

Support
#1

https://wordpress-171232-956414.cloudwaysapps.com/

Hi there, Im having trouble with my nav, and top bar padding, margins etc. And logo aligment.

1: How do I match this design:

2: Also, on a mobile view, there is a thin border around the top bar, how do I get rid?

3: If I needed to, how would I hide the topbar on a mobile device?

4: How do I increase the site width, as you can see, its not matching my design, there is too much space left and right of all the elements, how do I set it higher than 90%?

5: how do I get the top bar elements to align right, and with the nav bar?

Thanks.

#2

Hi @logoglo,

Thank you for writing in, 1) Aligning the logo with the topbar is not quite possible without customization. You might want to convert to PRO instead so you can have the Header builder and build your header design with it.

X To Pro Conversion

  1. Add this to Theme Options > CSS 
.x-topbar .p-info {
	border-width: 0 !important;
}
  1. To hide the topbar on mobile.
@media (max-width: 767px) {
 .x-topbar {
		display: none;
	}
}
  1. Please navigate to Theme Options > Layout and Design and adjust the Site Width and Site Max Width.



  1. On the #2 answer above, you can add text-align: right; property to it.

e.g.

.x-topbar .p-info {
	border-width: 0 !important;
	text-align: right;
}

Hope it helps,
Cheers!

#3

1, I have a work around I think, I have added transparency to the top bacr (though now its showing a line, how do I remove this?)

And added:


.x-brand {
    margin-top: -80px;
    font-family: inherit;
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.035em;
    color: #272727;
}
  1. I had it set to the max width in the options, so I added this:

.x-container.width {
    width: 95%;
}
.x-container.width {
    width: 95%;
}
.x-container.max {
    max-width: 1800px;
}

Seamed to have worked.

So just need your help on:

1: The menu doesnt seam to be align right, can you check?

2: And back to #1, there is a line behind the logo, how do I get rid?

Thanks.

#4

Hey @logoglo,

  • To remove the line behind the logo, please add the following code in the Theme Options > CSS: 
.x-navbar {
    box-shadow: none;
}
  • For the menu alignment, try adding the following code:
.x-navbar .desktop .x-nav>li:last-child a {
    padding-right: 0;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

#5

Perfect! that has fixed it :wink: thanks.

#6

You’re welcome!
Thanks for letting us know that it has worked for you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.