Phone View Navigation bar are become ugly and no orderly

Store Design
1

Hi there,

since I have to change the header of the navigation bar then the header of the phone view will become very wide and the logo suppose beside the navigation bar. How could I change it via CSS?

Boonphei_2-1655774333962.png
Boonphei_2-1655774333962.png301×771 27 KB

URL:https://dermaskinshop-testing-2022.myshopify.com/

Password: Neoasia46100

2

Hi @Boonphei ,

Are you wanting this?

Screenshot.png
Screenshot.png378×234 7.74 KB

Please send me the code of header.liquid file, I will check it for you

3

@Boonphei ,

@media only screen and (max-width: 567px) {

.grid__item.menubar_inner {
    display: flex;
    flex-direction: row-reverse;
}
.header-type-7 .menu_bar_right {
    margin: 6px 0;
}
.header-type-7 .menu_bar_right>li {
    padding: 0 3px;
}
h1.site-header__logo {
    height: auto;
    top: 11px;}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->frame.scss.liquid

4

Hi @oscprofessional ,

Your solution is working. Thank you.