[Resolved] Centring Search Icon In Main Nav Bar

[Andrew]

In mobile view (desktop view is okay), I can’t centre the Search icon vertically. It’s causing issues because clickable elements are too close together on mobile (search bar and header image).

I’ve played around with CSS, but can’t get it to work.

Website: https://topwiretraveller.com

Screenshot showing Search icon at top of nav bar:
https://share.getcloudapp.com/mXu1pYA5

I want the Search icon to be centred vertically (like the hamburger menu and “Main Menu” text in the screenshot).

Any solutions? Thanks.

[Ying]

Hi Anderw,

Give this CSS a try:

@media (max-width: 768px) {
    .inside-navigation .mobile-bar-items {
        position: relative;
    }
    .inside-navigation.grid-container.grid-parent {
        display: flex;
        align-items: center;
    }
    .inside-navigation .menu-toggle {
        order: -1;
    }
}

Let me know 🙂

[Andrew]

Perfect, thanks Ying!

One other related question. How do I make the secondary nav (at top) hamburger icon bigger? It’s getting flagged as being too small. I’m okay if the “Support Links” text size increases, too.

[Ying]

No problem, try this:

.menu-toggle.secondary-menu-toggle svg {
    height: 1.5em;
    width: 1.5em;
    top: 0.4em;
}

[Andrew]

Yep, that’s it. Thanks for your help Ying!

[Ying]

You are welcome 🙂

[Author]

Posts