Empire theme removed search bar, but logo and navigation are off-center

Technical Q&A
1

As the title entails. I removed my search bar using

.live-search {
display: none;
}

on theme.css.liquid, but now my navigation and logo are off center (I want navigation on left of logo, and logo centered.)

Would appreciate some help!

Screenshot_41.jpg
Screenshot_41.jpg1904×236 26.3 KB

2

Hi @kqxer ,

Please change code:

.live-search {
  display: none;
}

=>

.live-search-form {
    display: none !important;
}

Hope it helps!

3

Hi there, thanks for your reply. When I inputted your code, the logo went to the left, instead of the center. I’ve attached a photo of what needs to be moved.

Screenshot_453.jpg
Screenshot_453.jpg1897×138 18.6 KB

4

Hi @kqxer ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media screen and (min-width: 1024px) {
	.site-header-main {
		position: relative;
	}
	.site-header-main-content {
		margin: 0 10rem !important;
	}
	.site-header-right {
		position: absolute;
		right: 0;
	}
}
5

Hi @kqxer ,

Please change code:

@media screen and (min-width: 1024px) {
	.site-header-main {
		position: relative;
	}
	.site-header-main-content {
		margin: 0 10rem !important;
                justify-content: center !important;
	}
	.site-header-right {
		position: absolute;
		right: 0;
	}
        .site-header-cart {
                margin-top: -23px !important;
        }
}
6

The logo is almost centered. Navigation is still off though :confused:

Capture.PNG
Capture.PNG2545×187 20.6 KB

7

Hi @kqxer ,

Please add code:

@media screen and (min-width: 1024px) {
        .site-header-logo {
                margin-right: 0 !important;
        }
	.site-header-main-content {
		margin: 0 42% !important;
	}
	.site-navigation-wrapper {
		position: absolute;
		width: 40%;
		top: 0;
		height: 100%;
		z-index: 999;
	}
	.site-navigation {
		height: 100%;
	}
	.site-navigation .navmenu-depth-1 {
		align-items: center;
	}
}

it will show like this:

Screenshot.png
Screenshot.png1911×141 37.6 KB

8

I love it. Thanks for your help!