[obiokere]

Hi. I’m using Catchbox Pro. I’m having trouble aligning my logo image with my Header Top SideBar.  I have social media icons in the Header Top Sidebar widget and need them to be aligned vertically with my   logo image on the left.  I also want to increase the right margin of the Header Top Sidebar to be about 10px.  The dimensions of my logo image is 350×200.  What kind of custom css should I input?  Below you can find a link to screen shot of my page:

[obiokere]

 

[obiokere]

http://i817.photobucket.com/albums/zz92/ookere/315d4fc7-7538-42b6-933c-15929c0f6798.jpg

[Sakin]

@obiokere: Just move your social widget from Header top Sidebar to Header Right Sidebar and you can control the margin of header from “Appearance => Theme Options => Header Options”

[obiokere]

Thank you @Sakin.  I tried your recommendations and I am still having trouble positioning my social media icons using the Header right sidebar.  I tried to adjust the spacing using the header options but it still created a look to my page that I don’t want.  I have illustrated my challenges in the below pictures.  Can you help me fix this?  Is there a custom css code to get this just right?

http://i817.photobucket.com/albums/zz92/ookere/picture_one.png

http://i817.photobucket.com/albums/zz92/ookere/picture_two.png

[Sakin]

@obiokere: Can you send me your site URL. So, that I can check in what you are doing it. From the image it is bit difficult, as I cannot see the code.

Don’t worry, I will help you to fix this issue soon.

[obiokere]

Hi @Sakin. The url for my site is http://newjobfor.me .  Thanks for your help

[Sakin]

@obiokere: You can add the padding to in header right sidebar as per your need to adjust it. Just add the following CSS in “Appearance => Theme Options => Custom CSS” box
`
/* Padding for Sidebar top */
.sidebar-top { padding-top: 100px; }
/* For mobile device to remove the padding you have added for Sidebar top */

@media screen and (max-width: 767px) { .sidebar-top { padding-top: 0; } }
`

[obiokere]

Thank you. That was very helpful.  My problem now is that I don’t know how to make the background color of my sidebar-top different from my sidebar.  I want the background of my sidebar to remain gray while the sidebar-top background is white. 

[obiokere]

This picture describes what I’m trying to do.

[Sakin]

@obiokere: Just add the following CSS in “Appearance => Theme Options => Custom CSS” box. This will make your background color of header right sidebar to transparent so it matched the background of header.
`.sidebar-top .widget { background-color: transparent; }`

[obiokere]

Great! Thank you so much!

[Author]

Posts