[Studio ChurchParticipant]

I need help please. I want to put my navigation link options in the TOP BAR (like http://theme.co/x/demo/ethos/1/ ).

I made a couple of changes and now can not figure out how to do that again.

Any help would be appreciated.

Thanks

http://studiochurch.org/

[Paul RModerator]

Hi,

Thanks for writing in!

The navigation in ethos 1 demo is the navbar itself and not the topbar which in your case you have change the background to blue.

To add your menu items in the topbar, you can add the code below as your topbar content under header in the customizer.

<ul class="x-top-nav"><li><a href="http://studiochurch.org"><span>HOME</span></a></li>
<li><a href="http://studiochurch.org/about/"><span>ABOUT</span></a></li>
<li><a href="http://studiochurch.org/vision/"><span>VISION</span></a></li>
<li><a href="http://studiochurch.org/contact/"><span>CONTACT</span></a></li>
<li><a href="http://studiochurch.org/donate/"><span>DONATE</span></a></li>
</ul>

Then you can add this under Custom > CSS in the Customizer.

.x-top-nav {
    float:right;
}

.x-top-nav li {
    list-style-type:none;
    display:inline-block;
    vertical-align:top;    
}

.x-top-nav li a {
   padding:0 10px;
    line-height:30px;
}

Hope that helps.

[Studio ChurchParticipant]

Excellent – thanks so much!

[NicoModerator]

You’re most welcome!

Let us know if you need anything else.

Cheers!

[dmills1Participant]

When I follow these instructions it pushes the social icons down a line. Can I have both the icons and the menu in the top bar?

[dmills1Participant]

This reply has been marked as private.

[dmills1Participant]

I would like this to look like the regular menu bar.

[dmills1Participant]

And, they aren’t lining up with social lower than the links, I’ve also searched for a way to change the color of the top bar links, but they are not in customize. please advise.

[JadeModerator]

Hi there,

Please add this CSS:

p:empty {
    display: none;
}

.x-top-nav {
    float: left;
    margin-bottom: 0;
}

.x-top-nav li a{
    color: #fff;
}

Hope this helps.

[dmills1Participant]

Thank you that is great! How do I make the letters stay white before hover (instead of grey)

[FriechModerator]

Hi There,

To make the topbar link color to white you can add this under Custom > CSS in the Customizer.

.x-topbar .p-info a {
	color: #fff;
}

But before you do that, please check your whole custom css here: http://csslint.net/
and fix the errors (probable a missing curly braces), else the code provided wont work.

Hope it helps, Cheers!

[Author]

Posts