Positioning header image over slider

Sparkling
1

Good day!

I have a question regarding the ‘header image’, which I am able to set in the customizer. I assume most people use this to put their logo in the header. The website I made with your theme uses a vertical logo, which would either make the header fairly tall, or the logo very small.

Because of this I was wondering if there is a way to reposition the header image to be centered in the slider?

Kind regards,
ThomDJ

2

Hi ThomDJ,

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

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

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

.navbar-header {
    display: table;
    margin: 0 auto;
    float: none;
}

Best Regards,
Movin

3

Good day!

I applied your code and came to a solution in my Windows Chrome browser that was satisfying to me on my website www.nieuwtoezicht.nl: click for example 1

When I use the “Toggle device toolbar”-option in Chrome to resize the browser screen to check responsiveness all is fine. When I check the website on my iPad in landscape mode, though, the menu bar at the bottom of the image disappears: click for example 2

When I try to recreate this in my browser I don’t get this issue: click for example 3

I edited header.php to add another div to show the header image.
Finally, I added code to style.css to style everything.

.navbar-brand {
    font-size: 21px;
    font-family: 'Roboto Slab', serif;
	margin: 0 !important;
}

@media (min-width: 993px) {
	.navbar-brand {
		display: none;
	}
}

@media (min-width: 993px) {
	.menu-image {
		background: url('http://...');
		position: relative;
		height: 300px;
	}
}

@media (min-width: 993px) {
	.navbar-header {
		display: table;
		margin: 0 auto;
		float: none;
	}
}

.logo {
	height: 150px;
	width: auto;
}

@media (max-width: 992px) {
	.logo {
		display: none;
	}
}

@media (min-width: 993px) {
	#logo {
		display: block;
		height: 240px;
		width: 240px;
		line-height: 240px;
		-moz-border-radius: 120px;
		border-radius: 120px;
		background-color: #ffffff;
		color: #ffffff;
		border: 1px solid rgba(0,0,0,0.1);
		text-align: center;
		font-size: 2em;
		margin: 30px 0 30px 0;
	}
}

.flexslider {
    display: none !important;
}

.flex-caption {
    display: none !important;
}

@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Any idea why this problem is occuring, I’ve tried a couple of things, but I’m not sure myself?

Thanks a lot!

4

This can be your iPad cache issue so please clear the cache from your iPad browser or try using different browser.

5

Good day!

I’ve tried this, but sadly that’s not the case.

6

Could you please tell me exactly what you have tried?