Docs

[Nina M]

Hi, I’d like to get the search icon (currently to the right of my site at the top) over to the left of the header to the bottom (above the breadcrumbs) and I’d like it to have a small search box with either a shadow (so you can see it) or a 1 px outline in color: #5d215d; can you help with that?

Current CSS:

.archive .x-landmark {
	display: none;
}

.x-navbar .x-brand {
	margin-bottom: 25px;
}

.x-navbar .x-container.max.width {
	max-width: 90%;
	width: 90%;
}

footer.x-colophon.top {
	margin-bottom: -25px !important;
}

a.x-brand.img {
	position: absolute;
	top: 30px;
	left: 440px;
	z-index: 99999;
}

.x-menu-item-woocommerce a.x-btn-navbar-woocommerce {
	padding-top: 15px !important;
}

.x-navbar .desktop .x-nav > li > a {
	padding-bottom: 30px;
	padding-top: 27px;
}

.x-navbar-wrap {
	position: relative;
	z-index: 99;
}

.x-menu-item-woocommerce a.x-btn-navbar-woocommerce {
	padding-top: 15px !important;
	top: -10px;
	left: 80px;
}

@media(min-width: 980px) {
	.x-brand.img {
		position: absolute;
		top: 0;
		left: 480px;
		z-index: 99999;
	}
}

.top-menu {
	float: left;
}

.top-menu ul {
	margin: 0;
}

.top-menu li {
	display: inline-block;
}

.top-menu li a {
	padding: 0 20px 0 0;
	line-height: 46px;
}

.x-social-global .cart {
	color: #5d215d;
}

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Nina M]

Hi, it’s http://www.MiaChocolates.com/shop-main

The home page has a different set up but you can see what I’m talking about on this page. Thanks so much!

[Jade]

Hi Nina,

Please add this code in the customizer:

.page .x-nav-wrap.desktop #menu-blank-menu {
    position: absolute;
}

.page .x-nav-wrap.desktop #menu-blank-menu .menu-item a {
    position: relative;
}

.page .x-nav-wrap.desktop #menu-blank-menu .menu-item a span {
    position: absolute;
    bottom: 15px;
}

The search icon functions in a way where the search panel will popout when you click it. Adding a search box beside it would defeat its functionality.

Let us know if you have further questions.

[Author]

Posts