[Resolved] Custom Menu Layout

[Elvin]

But doing so causes another problem. When the close button is aligned to the left it covers the text once again.

I was gonna suggest to add padding or margin to either left or right side of your search input area depending on where you put it so it has “space” for the close button.

I’ve checked your site again to find the CSS selector to do the job but you seems to have already found it and actually added a padding. Nice job, it looks good now.

So I guess some more dev is needed to fix this. Definitely a tough one for something so light.

Thanks, we’ll look into it.:)

[Fredrik]

Ah I see! but your suggestion got me going in the right direction 🙂 so thx for that. I never touched CSS before so it’s not clear really what I’m doing. I’m more familiar with C# and game dev.

So I did this,

/* move active search box "X" to left */
	li.search-item.active {
        position: absolute !important;
}

/* change background of search window & add shadow */
	.navigation-search.nav-search-active {
	background: #000000; - /* supposed to be black, opacity that needs removing? */
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
}

/* move search cursor position left desktop */
	.navigation-search input {
	padding-left: 70px;
}
/* move search cursor position left mobile */
	@media (max-width: 768px){
	.navigation-search input {
	padding-left: 50px;
}

Feel free to add suggestions or improvements. Once again thx!

[Elvin]

/* move search cursor position left desktop */
	.navigation-search input {
	padding-left: 70px;
}
/* move search cursor position left mobile */
	@media (max-width: 768px){
	.navigation-search input {
	padding-left: 50px;
}

Looks good. That’s pretty much what I was gonna add.

No problem. Glad to be of any help. 🙂

[Fredrik]

Nice!

One thing always leads to another…

So when moving the active search box “X”, it also moves the Woo Cart to the left on toggle. I noticed this when I changed the colours back the way I liked.

I tried #FFF to mask it, but then flickering occurred. Think this has to do with the fact that the Woo Cart jumps to the left faster than the search window opens.

/* move active search box "X" to left */
	.main-navigation li.close-search {
    position: absolute !important;

I guess this has something to do with how the menu was structured. When we toggle/remove the .search-item from order:2 the Woo Cart takes its place.

	#menu-test-site-menu {
		display: flex;
	}
	
	.slideout-toggle {
		order: 1;
	}
	
	.search-item {
		order: 2;
		margin-right: auto;
	}
	
	.wc-menu-item {
		order: 3;
	}
}

Some way we could always make each menu item stay put? 🙂

[Tom]

Hi there,

I’m not sure I’m seeing the issue – where should I be looking, exactly?

[Fredrik]

Hello Tom,

I forgot to update sorry. I changed to this (CSS below), and that fixed the woo cart moving to the left 🙂

	#menu-test-site-menu {
		display: flex;
	}

	.slideout-toggle {
		order: 1;
	}

	.search-item {
		order: 2;
	}

	.wc-menu-item {
		order: 3;
		margin-left: auto;
	}
}

I changed it back so you can see the problem. Once again thx!

[Tom]

That margin-left: auto; on the .wc-menu-item class is the perfect solution 🙂

[Fredrik]

Perfect 🙂 Thank you for all your help & guidance!

[Tom]

No problem! 🙂

[Author]

Posts