Docs

[Julius]

Hi Themeco

I’m looking to create an effect like this, but with the navbar in the right side.
I tried illustrating it using Photoshop in the screenshots below.

Could you provide me with the lines of CSS what would allow me to adjust the spacing my fixed right navbar has to the right, and the opacity?

I’d also like to ask if it is possible (if so, how?) to create an effect like this site uses.

Where the navbar i cut off about half way down, and an image (in their case a triangle) has been added to the bottom to create a ribbon effect.

I attatched a mockup to how that could look with my navbar too.

My site: http://www.mortenlissau.dk

[Rupok]

Hi there,

Thanks for writing in! This kind of customization is out of our support scope but I am providing you some code so that you can start :

Let’s add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-right {
  background: rgba(0, 0, 0, 0.8);
  border: medium none;
  margin-right: 75px;
}

Hope this helps.

Cheers!

[Julius]

Cool, you solved the first problem, thank you!

I will play around with the last idea, but the CSS defiantly helps on that part too.

Cheers!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Julius]

Quick follow up question:

The page layout does not seem take into account that the navbar has been pushed towards the middle. Therefore the content is no longer centered.

Is it possible to do something about that?

[Julius]

Screenshot

[Julius]

Also, if possible, the css should be specific to desktop to avoid transparency and the margin effect on the mobile navbar.

[Paul R]

Hi,

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

@media (min-width: 979px) {
body.x-navbar-fixed-right-active {
    padding-right: 345px;
}
}

Hope that helps

[Julius]

Yes, it does.

Thank you very much!

[Joao]

Glad to hear it.

Joao

[Author]

Posts