[liz80yParticipant]

Hi,

I have a few things I’m struggling with right now and thought you might be able to help.

1) At the moment my logo is positioned to the left of my main menu headings in my header. I would like to know how I can move it to sit above the menu headings in the center, i.e. the top row will have my logo in the center and the next row will have my menu spread evenly underneath the logo.

2) Is there some way of being able to move my social media icons from the topbar in the header to the sidebar? I would like them in a line as they are in the header.

3) I was thinking about changing the background of my sidebar and footer to white. I wanted the white background to go from straight under my slider, down to the very bottom of my page and then across to the left including the footer area. When I attempted this, the white colour only went to the top of my sidebar heading and left a gap between the sidebar info and the edge of the screen (right hand side), it also didn’t continue the entire way down. Is there code to fix this?

Thank you so much 🙂

[liz80yParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! 1) On your admin dashboard navigate to Appearance > Customize, then on Customizer under the Header panel then set the Layout option to Stacked.

2) It is possible with custom development, but if afraid that would fall outside of the scope of support that we can offer. However, you can also copy the HTML that the topbar generates and paste on a text widget for your sidebar.

<div class="x-social-global">
	<a href="https://www.facebook.com/pages/Outback-and-Bush-Australia/513467882141525?ref=hl" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>
	<a href="https://twitter.com/OutbackAndBush" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>
	<a href="https://plus.google.com/u/0/107795881628283987272/posts" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a>
	<a href="https://instagram.com/outbackandbushaustralia/" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>
	<a href="www.pinterest.com/outbackandbush/" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>
</div>

3) Change the black background color that you apply on the site’s body with white.

.site {
    background: #fff !important;
}

Then apply a black background color to the main content (left side)

.x-main.left {
	background-color: #000;
}

Hope it helps, Cheers!

[liz80yParticipant]

Thanks for your help.

1) Unfortunately the logo is still on the left hand side. I do have quite a bit of CSS in the customiser to do with the header, so maybe there is a confliction. I have tried deleting certain CSS but nothing seems to make it happen..

2) That worked, thank you. I was wondering if there was a way to spread the icons out a little and maybe make them a bit bigger?

3) The background worked great, that’s wonderful!

[liz80yParticipant]

Also, can you tell me how to minimise the gap in between the image widget and the text widget in my sidebar (where I introduce myself)? I’d love them to be a little bit closer together.

Thanks again 🙂

[ChristopherModerator]

Hi there,

#1 Currently you added logo to your menu navigation, please remove it. Please find and remove this code :

@media (min-width: 980px){
.x-logobar {
    display: none !important;
    visibility: hidden !important;
}
}

And add logo under Customize -> Header -> LOGO – IMAGE.

#2 Please add class="mbn" attribute to your image tag. Add this CSS as well :

x-sidebar .widget {
    margin-top: 0;
}

Hope that helps.

[liz80yParticipant]

Hi,

1) I have removed the code, removed the logo from the menu as you said and uploaded it to the Header – Logo – Image section. I have got the logo in the center, above as I wanted. Thank you for that. The only issue I have now though is that my menu went crazy. I still had ‘Home’, ‘About’, ‘Planning’ and ‘Destinations’ heading but not the ‘Blog’, ‘What’s On’ and ‘Info centers’ headings.
I went into menu section and found them in the main search and added them to the primary menu but I have noticed that the information that was on the ‘What’s On’ and ‘Info Centers’ pages is missing. I have found this info in the same menu section as a menu item to add to the primary menu. It used to be embedded into the page e.g. The same way that the ‘Planning’ page has been set up.
Can you tell me how to get it back to the way it was?

2) I couldn’t find an image tag for the photo. I have added it to one of the fields that I thought was correct and added the extra CSS but can’t see any difference.

Thanks so much 🙂

[liz80yParticipant]

I just noticed that the CSS code you gave me for the sidebar is changing the gap above my optin box. Is there another code for above the text?

[liz80yParticipant]

Sorry, I think I’m confused. Was the code and Class=”mbn” to remove the gap between my image and the text in my sidebar or was it to spread the social media icons further apart? The only thing I can see is it closes the gap between my optin box and the social media icons.

🙂

[Rue NelModerator]

Hello There,

Sorry for the confusion! Regretfully, at this time I am not entirely certain what it is you would like to accomplish with your header based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

To separate the icons in your sidebar, you can use this code:

.x-sidebar .x-social-global a {
    margin-right: 5px;
    text-decoration: none;
}

We also noticed that you missed the px unit in your css code (http://prntscr.com/9o7pvg). Please fix it.

[liz80yParticipant]

Thanks for helping me.

1) Can you please confirm, when you originally said

#2 Please add class=”mbn” attribute to your image tag. Add this CSS as well :
x-sidebar .widget {
margin-top: 0;
}

Was this to close the gap between the image and the text in sidebar?
If so, It’s only changing the space between my optin box and the social media icons. I have it set to 10px now for this space.
I have added the ‘px’ as you later suggested.

So what code would change the gap above the ‘Hi, We’re Liz and Trev’ text area?

2) I have managed to spread the social media icons, that worked. But how do I enlarge the icons a little?

3) With regard to the logo and menu issue, I did what you suggested originally and it made my nav bar menu go crazy on me. I lost the last 3 menu headings. I later found them when I went to Appearance – Menus, under the ‘Pages’ tab, and added them to the primary menu.So that’s all fine now… But….

Two of these menus (What’s On and Info Centers) had posts on each of their main pages and now that is gone. I have found the information in the Appearance – Menus area under posts but I am unsure how to add it back to the applicable pages rather than just having the info as a separate menu item under that heading.

If you look at the heading ‘Destinations’ that is what the What’s on and Info centre pages are supposed to be like.

I hope this is making sense. If not, I don’t know how else to explain it.

Anyway, if there is a way to fix it that would be wonderful 🙂

If I could possibly push my luck a bit further, could you help me with two other problems i’m having?

4) I have created a menu in the my footer and would like this to be in the center aligned. I have tried so many times to fix this.. can you help?

5) I have also been trying to make the copyright information appear above my social media icons in the bottom footer area. If you scroll over it, you will see it there but I can’t manage to change the colour to black.

Thanks again 🙂

[ChristopherModerator]

Hi there,

#1 Please add this CSS :

div#widget_sp_image-3 img {
    margin-bottom: 0;
}

#2 Find this code :

.x-sidebar .x-social-global a {
    margin-right: 20px;
   icon-size: 10px;
    text-decoration: none;
}
.x-social-global a.facebook:hover {
    background-color: #488937;
}

And update it to :

.x-sidebar .x-social-global a {
    margin-right: 20px;
    font-size: 20px !important;
    text-decoration: none;
}
.x-social-global a:hover {
    color: red !important;
}

#3 The pages ‘what’s on’ and ‘INFO CENTRES’ are displaying fine, see the attachment. Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

#4

footer .widget_text ol,footer .widget_text ul {
    margin: 0;
}

#5

.x-colophon-content {
    color: black !important;
}

Hope that helps.

[liz80yParticipant]

Thanks so much. That all worked well.

Don’t worry about the menu headings problem. I will attempt to copy and paste and see what happens.

You’ve been a great help 🙂

[ChristopherModerator]

You’re welcome.

[Author]

Posts