• Status: Closed
  • Closed by: Marek (marek)
  • Closed on: 01.03.19, 16:09
  • Reason: Closed
  • Comment: Glad to help!

Ticket #13602 - Customize header on mobile


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  {

#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?


This ticket does not depend on any other tickets.

Marek (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 (sylvainbotter) 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 (marek) 27 Jan 2019, 10:40

You are welcome