Docs

[Mark M]

I have a site (running Renew Stack) that I am working on currently and in order to match the branding of the company the logo must hang from the fixed header. When I change the padding to make this happen a solid white line appears about 25px wide that covers the slider. I would like for this to be transparent. Also as soon as I scroll, the white border becomes the color of the header background and swallows up the logo image. I’ve attached two screen shot for you to visualize what I am talking about.
First:

Second:

[Alexander]

Hi Mark,

Thanks for writing in. This would take some CSS customization. Do you have a link to this site? We could take a look. It might be possible be using a combination of opaque and transparent backgrounds.

[Mark M]

I do not have a link for the site as it is just housed on my local machine while being developed.

[Support]

Hi Mark!

I’m sorry but we won’t be able to help you unless we can see the site live. If you don’t mind me asking, what are the steps that you have taken in order to have that kind of logo. And if possible, please post the logo image here using imgur, dropbox etc. Maybe, we can reproduce it on our end. What stack are you using?

Cheers!

[Mark M]

I am using the Renew stack. My header is inline with the header image at 750px wide and a navbar logo top alignment of 50px.

Here is the link to the header image: CyberSharks.Net Logo

[Support]

Hey Mark,

Can you remove the paddings you added and try out adding these styles on your Customizer Custom CSS section first and let’s see if this works out well.
.x-brand { position: relative; top: 30px; }

Adjust the top value as you like. Be sure to double check the responsiveness by trying to resize your browser’s width.

Cheers!

[Mark M]

That worked perfectly! Thanks for the help guys. Love the theme and all it’s capabilities.

[Support]

Glad to be of service Mark.

Have a great day!

[Jessica R]

I’m trying to do this with my site as well. I was really happy to see this thread already existed, but I don’t think this is quite giving me the desired result. My logo image is 300 x 300 and set to retina display (so 150×150). I’d like the bottom of the header to come to the middle of the image, so the bottom half is hanging below the header. Here is what I’m getting: http://screencast.com/t/uwk7g1ZWTK. How do I move the logo up and get rid of all that space, please? 🙂 Page is here: http://jessicarea.me/home-clone

[Rad]

Hi Jessica,

How about using zero or negative top offset?

.x-brand { 
position: relative; 
top: -5px;
}

As the time of this writing, there is no logo added at your site.

Let us know.

[Jessica R]

Thanks guys, the site is live, so I don’t want to add the logo until it’s right. Here are some screenshots when I add it, and then when I scroll. At first, it looks perfect. Then I scroll and the nag bar expands. Boo.

#1- https://dl.dropboxusercontent.com/u/9525019/1-perfect%20position.png
#2- https://dl.dropboxusercontent.com/u/9525019/2-nav%20bar%20boo.png

How do I keep it from expanding on the scroll? And I don’t think the negative helped – that just moves the logo up…which is weird, because normally a negative would lower the image.

Thanks!

[Rad]

Hi Jessica,

This fix will be specific to your logo and menu only, and we could only assist you with the fix if we could personally check it. There are some underlying elements and styling that can’t be viewed just by screenshot.

Would you mind adding the logo and just hide it by this css ?

.x-brand {
display: none;
}

This should hide your logo even if you added it.

Let us know.

[Jessica R]

That code doesn’t seem to hide my logo. http://www.jessicarea.me/home-clone

[Zeshan]

Hi Jessica,

The following CSS code should work for you:

.x-navbar .x-brand {display: none !important;}

Hope this helps.

Thank you.

[Jessica R]

Yes, that did it.

[Author]

Posts