Archived topic

How Do I Move Split Theme Logo Position?

5 replies · Started by Andre on January 23, 2019

Viewing posts 1–6 of 6

January 23, 2019 at 1:52 pm #790417

Hi guys!
I'd like to re-position the location of the Split theme logo from the centre to the left.

I've figured how to close the width of the menu items from this post, https://generatepress.com/forums/topic/split-template/ so all I need to do now is re-position the logo location.

In the customizer, is this the code I need to manipulate to achieve this?

Thanks.

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 200;
}

January 23, 2019 at 4:42 pm #790520

Hi there,

So you don't want menu items on both sides of the logo?

If so wouldn't it be easier to start the site from scratch? There isn't anything special about Split other than the center logo header layout.

The other method would be to basically undo everything here:
https://docs.generatepress.com/article/centering-logo-navigation/

January 23, 2019 at 5:44 pm #790560

Hi leo, thanks for the reply. Split theme has the font and layout I actually want so that's why I wanted to use it to save the effort of creating it again. Erasing the header layout is a good alternative for me, thanks a lot. Some times the obvious solution eludes your brain:)

January 23, 2019 at 6:03 pm #790573

Hi there,

If you want to just remove the CSS, you can go into Customize > Additional CSS and remove the following:

Line 1-30:

.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.header-widget {
	order: 10;
	overflow: visible;
}

.nav-float-right .header-widget {
	top: auto;
}

.nav-float-right .header-widget .widget {
	padding-bottom: 0;
}

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 200;
}

Line 32 - 37 (once the above is gone):

#mobile-header .mobile-bar-items {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4;
	margin-left: auto;
}

Line 57 - the end:

#site-navigation {
	float: none;
	width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.main-navigation .menu-item-separator {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

@media (max-width: 768px) {
	.inside-header>:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
	}
}

That should do it :)

January 24, 2019 at 7:09 am #791065

Thank you so much!

January 24, 2019 at 8:57 am #791179

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.