Archived topic

header elements alignment problem

1 reply · Started by johnaps on October 12, 2019

Viewing posts 1–2 of 2

October 12, 2019 at 3:38 am #1032609

Hello guys!

I am trying to fix how my header looks like on media screens 568px and bellow...

I am trying to achieve the following order:

UP & LEFT position: 1st item (menu toggle) 2nd (site-logo)
UP & RIGHT position: 1st item (secondary menu item) 2nd (cart)
bellow this line that is made by the above structure will be
(Search bar) in full screen width

Is it doable?

Thanks

October 12, 2019 at 9:23 am #1032878

Hi there,

this CSS will move the search below the other header elements:

@media (max-width: 568px) {
    .inside-header {
        flex-wrap: wrap;
    }

    .woo-search {
        order: 6;
        flex: 1 0 100%;
    }

    .woo-search .dgwt-wcas-search-wrapp {
        margin-left: 0;
        margin-top: 10px;
    }
}

This archived topic is closed to new replies.

Start building better websites today.