• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Marek
  • Private: No
  • Open Date: 24.01.19, 15:50
  • Opened by: Botter Sylvain
  • Closed by: Marek
  • Closed on: 01.03.19, 16:09
  • Reason: Closed
  • Comment: Glad to help!

Ticket #13602 - Customize header on mobile

Hi!

I am struggling trying to aligne three elements in a row! (see attached). I desactivated the header builder because I couldn’t align them on one line..

So I starting with css: see bellow:

@media (min-width: 320px) and (max-width: 767px) {
  
#search_widget  {
display:none;
} 

#header .header-nav  {
align-items: right;
} 

.icon_menu.flex-container.justify-content-center.align-items-center {
align-items: left;
} 

}

but it won’t align the hamburger to the left and the icons to the right, why?

thanks!

Comments

Marek 25 Jan 2019, 14:46

Try following CSS:

@media (max-width: 767px) {
.header-main > .page-width #pk_top_menu {order:1}
.header-main > .page-width .header_logo {order:2;min-width: 40%}
.header-main > .page-width .header-right-side {order:3}
}
Botter Sylvain 26 Jan 2019, 17:14

Thanks! It helps ;) I am trying to align them left and right but looks like there is a kind of rule that forces the elements to be centered!

Marek 27 Jan 2019, 10:40

You are welcome