Overflow header image vertically from menu bar

Sparkling
1

I’m using the Sparkling theme on my website and would like to have the header image which is in the menu bar to overflow vertically. Currently, when I select an image the width of the menu bar increases alongside with the height of the image selected. Since the header image is rather large (otherwise you can’t read it) I don’t want to stretch the menu bar too far to accommodate it. After some looking around online I learned that in CSS you can do this by using the ‘overflow’ function.

what I tried so far:
the div in control of the logo is
<div class=“navbar-header”> and <div id=“logo”>

Therefore in the custom CSS I added the following

#logo {
overflow: visible;
}

This however did not change anything. Who can tell me what I’m doing wrong?

(in the attachment is a screenshot of what I meant, in capture.png you can see how the website currently looks like and in capture2.png you can see how I would want it to look like)

2

Hey there,

I hope you are well today and thank you for your question.

Can you provide the URL to your website so we can have a look at the issue and how best to assist you?

Best regards,
Support.

3

Hey,

the website is https://www.vvdlimburg.nl/

thanks in advance for your help!

4

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.site-navigation-inner.col-sm-12 {
    position: static;
}

#logo img {
    position: absolute;
    height: 100px;
    width: 150px;
}
5

Thanks for the amazing help! I just altered the code a little bit so that the image wouldn’t be stretched.

.site-navigation-inner.col-sm-12 {
    position: static;
}

#logo img {
    position: absolute;
		top: 8px;
    height: 90px;
    width: auto;
}

Might help someone else with the same problem.

6

You are most welcome here :slight_smile: