Customizing the Top Nav Bar

[kenzi0106]

Hello! Two things regarding the top bar:

1. Is it possible to remove the social icons from the top bar, but still display them in the footer?

2. I’d like to put two different “menu” items on the right side of the top bar, linking to two different url’s. Is this possible?

[jade]

Hi @kenzi0106,

@kenzi0106

Is it possible to remove the social icons from the top bar, but still display them in the footer?

You can do this by adding this CSS code to the Global CSS:

.x-topbar .x-social-global {
    display: none;
} 

@kenzi0106

I’d like to put two different “menu” items on the right side of the top bar, linking to two different url’s. Is this possible?

You can do this by adding some custom HTML to the topbar content and some CSS.

Please try this HTML in X > Theme Options > Topbar > Content:

<span class="right">
    <a href="LINK_TO_THE_PAGE">Page 1</a> |
    <a href="LINK_TO_THE_PAGE">Page 2</a> 
</span>

Then add this code to the Global CSS:

.x-topbar .x-topbar-inner .right {
    display: block;
    float: right;
}

.x-topbar .x-topbar-inner .right a {
    display: inline-block;
    padding: 0 5px;
}

Hope this helps.

[kenzi0106]

Hi! Thank you SO much. This all worked, however the code for getting the content to float right isn’t working. I’ve tried a couple of times. Could be an error on my end, but wanted to double check?

Thanks again.

[jade]

Hey @kenzi0106,

Please add this code as well:

.x-topbar .p-info {
    width: 100%;
}

Hope this helps.