Site logo

Archived topic

help needed moving search icon in the nav menu

4 replies · Started by Michael on December 24, 2020

Viewing posts 1–5 of 5

Hello,
I was able to move the seach icon from right to left using this css:

.main-navigation .menu-bar-items {
    order: -1;
}

My problem is that part of the search box is blocked. You can try using the search in the nav bar here https://app-5fd72a84c1ac1813f431cd4e.closte.com/

I can't figure out how to fix it.

thanks

Hi there,

try this CSS instead:

@media (min-width: 1025px) {
    .main-navigation .menu-bar-items {
        order: -1;
        z-index: 110;
    }
    .navigation-search.nav-search-active {
        z-index: 100;
        padding-left: 70px;
    }
}

thanks for the quick response. that did the trick!

just one small issue, David. In the sticky header, the search icon appears all the way to the left before the logo.

Try this as well:

@media (min-width: 1025px) {
    .main-navigation.navigation-stick .menu-bar-items {
        order: 1;
    }
    .main-navigation.navigation-stick .main-nav {
        order: 5;
    }
}
This archived topic is closed to new replies.