Docs

[troyassoignon]

Hello!

Loving Xthemes so far, a bit of a learning curve but it’s coming!

I would LOVE to customize my menu like apple’s menu.

Is this possible?

[Christopher]

Hi there,

Are you referring to http://www.apple.com/ ?
Please be more specific about what you are trying to achieve and provide us with your website URL.

Thanks.

[troyassoignon]

Hello Christopher thank you so much for your response, yes http://apple.com menu & header

http://ethicalempire.ca/agency/

[Joao]

Hi There,

You can go to Appereance > Customizer > Header and adjust the height of your navbar and the distance from the top to the links and the top to the logo and link spacing. The balance among those factors is what will bring your header in that direction.

Apple´s logo is way more minimalist than yours, so it is not so easy to get this slim look, becuase your logo won´t look as good that small.

Also add the following code to Appereance > Customizer > Custom > CSS to remove the border around the menu items.

.x-navbar .desktop .x-nav>.x-active>a>span, .x-navbar .desktop .x-nav>.current-menu-item>a>span, .x-navbar .desktop .x-nav>li>a>span {
border: 0;
}

Let us know if you have questions or need help with anything else.

Joao

[troyassoignon]

Awesome, thank you Joao!

How do I make the header bar black with transparency? I can switch my logo to white but I enjoy the black header.

[Rue Nel]

Hello There,

Thanks for the updates! Please recreate your logo in a photo editor and make sure that it will be white so that we can have a black with transparency color. Please add the following css code in the customizer, Appearance > Customize > Custom > CSS

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
}

.x-navbar {
    background-color: rgba(0,0,0,0.65);
}

And you will have something like this: http://prntscr.com/cqrqyt

Hope this helps. Please let us know how it goes.

[troyassoignon]

Yeehaw! Thanks 🙂

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[troyassoignon]

@Thai!

How can I make the links fade hover like the apple.com website?

[Joao]

Hi There,

Please add the following code to Appereance > customizer > Custom > CSS

.x-navbar .desktop .x-nav>li>a:hover {

    opacity: .65;
}

Hope it helps

Joao

[Author]

Posts