Docs

[pablo102]

Hello X-team!

I would like to simplify my website and shuffle few things around.
I wonder if you could help me with the menu position. I will have my logo centered on top (I can change it in customizer) and the menu below it overlapping the background image like in the attachment. Could you provide me with the code, please?

I would also like to change the look of the menu like on the attachment, so there is white font and transparent background.
My test site below:
https://idophotographydungarvan.ie/test-page-12/

Thank you for help!

[Rue Nel]

Hello There,

Thanks for writing in! To achieve what you have in mind, please do the following;
1] Please edit and upload your bigger logo (like the one in your screenshot)
2] Please go to the customizer, Appearance > Customize > Header > Logo and navigation and choose “Stacked”. Selecting “Stacked” will place the logo in a separate section above the navbar.
3] Turn off the breadcrumb
4] And you can apply a custom css, Appearance > Customize > Custom > CSS with the following:

.x-navbar {
    background-color: transparent !important;
    border: none;
}

.x-navbar-wrap {
    height: 0;
}

Please check this out: http://prntscr.com/d5d5i1

Hope this helps.

[pablo102]

Thank you!
Can I also ask you to remove the top bar over hovered menu item and the bottom shade effect, please?
If I want to lower the menu even more is it enough to increase the Navbar Top Link Alignment?

[Jade]

Hi there,

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

.x-navbar-inner {
    margin-top: 50px;
}

.x-navbar,
.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav>.current-menu-item>a {
    box-shadow: none;
}

Hope this helps.

[pablo102]

Thank you,
works great!

[Joao]

Glad to hear it,

Joao

[Author]

Posts