[Jay BParticipant]

http://feather-edge.com/

Hey guys managed to build a couple sites using X-Theme now. Real school boy problem here that I never had before… Can’t seem to move the logo to the left so that the menu fits inside the navbar. I understand the importance of white space however I feel there’s a little too much there.

Really experimenting with this one… Alternatively could you let me know some more info incase I want something different.

1. Changing the font within the nav to a custom font.

2. Removing the navbar so the menu items float on the page

3. Having the Logo set at the top of the page(not on the nav-bar) – still providing a click through to the home page.

If you guys have videos on the last 3 things that would be awesome to direct me to them. Could I get a direct answer on the first question first though as it’s crippling me!!! 🙂

[Jay BParticipant]

In addition to the first question I tried adjusting the content width in the customiser but it appears to do absolutely nothing at present…

[AlexanderKeymaster]

Hi Jay!

I’ve taken a look, and it looks like you were able to get the navbar white space working ok.

1. If you go to the Customizer and choose “Enable Custom Fonts” under “Typography” you’ll have the option to set a font for the navigation area.

2. You can remove the borders by adding some CSS Go to Customizer > Custom > CSS in your dashboard. Then add these rules:

.x-navbar {
border:none;
box-shadow:none;
}

.x-topbar {
border-bottom:none;
}

3. You could do this by adding some HTML to the Top Bar. In the Customizer, set the Top Bar to this HTML:

<a href="http://feather-edge.com/" class="x-brand img" title="Just another WordPress site">
        <img src="http://feather-edge.com/wp-content/uploads/2014/03/toplogocopy.jpg" alt="Just another WordPress site">      </a>

After this, change the “Logo” setting in the Customizer to “No Image” (because we’re providing direct HTML elsewhere)

Finally, to remove the textual title, you can add this custom CSS:

.x-navbar .x-brand.text {
display:none;
}

[Jay BParticipant]

Thanks so far just a few bits 🙂

There’s an annoying dotted line underneath the header logo now and it’s not centered 🙁 Is there a way this can be centred?

Also the NavBar Menu is ofset to the right – can we have this automatically centred?

Nearly there – this ones gonna be awesome! 😀

[SupportMember]

Hey!

Remove the border underneath the logo with this:

.x-topbar .p-info a {
border: none;
}

Use this to center align the logo:

.x-topbar .p-info {
display: inline-block;
float: none;
}
#top > header > div.x-topbar > div {
text-align: center;
}

I hope that helps.

[Jay BParticipant]

Yea that helped thanks 🙂 What about the menu centered? It’s still pushed to the right….

[AlexanderKeymaster]

Hi Jay,

This additional CSS will center the navigation for you:

.x-navbar .x-nav > li {
float: none;
display:inline-block;
}
.x-navbar .x-nav {
margin: 0 auto;
float:none;
text-align:center;
}

[Jay BParticipant]

Worked when I removed the social icons as they offset the menu in the nav bar which is fine as I didn’t particularly want them there anyway 🙂 Is there anyway I can move my social icons to the bottom of the page? I have deactivated them temporarily until I find a fix.

Thanks so much so far!

[AlexanderKeymaster]

Hi Jay,

Great! Glad that’s working now. In Customizer > Footer, you should see an option to enable the social icons for the footer.

[Jay BParticipant]

hmmm they still seem to appear at the top when entered into the social option in the customizer and when reduced to mobile or tablet size really become a nuisance as you can see. I’ll leave it as it is so as you can see it still appears at the top in the top bar. Be good to be able to disable them from the header or/and the topbar.
Any news of adding tumblr to your list of social icons? trying to use x without external plugins is all.

[Jay BParticipant]

Also there are lines either side of the inner container (left and right down the page) that are still showing. Can we rid the page of this somehow?

Tried this css in customizer but didn’t work – .x-blog-masonry-active .x-iso-container > .hentry .entry-wrap {
border: none;
}`

[SupportMember]

Hey Jay,

To hide social icons from header use following CSS

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

Add following CSS to hide border that should work

footer.x-colophon.top{border:none;}

Thanks

[Jay BParticipant]

Well neither worked unfortunately.

The CSS for the social icons made the footer icons disappear too and the CSS to remove the inner box border simply did nothing. Any suggestions?

[SupportMember]

Hey Jay,

To show footer only social icons add following CSS along with the last suggested CSS

footer.x-colophon:nth-child(5) > div:nth-child(1) > div:nth-child(2){display:block;}

Can you please attach a screenshot which border you want to remove.

Thanks

[Jay BParticipant]

Thanks that worked.

The inner container line on the left and right all the way down – I’ve seen a fair few sites that have managed to remove theirs but no instruction on how. http://feather-edge.com/?attachment_id=97

[Author]

Posts