• Priority: High
  • Status: Closed
  • Closed by: Marek (marek)
  • Closed on: 16.09.19, 09:50
  • Reason: Closed
  • Comment: Glad to help!

Ticket #15528 - unable to recreate the complex header as it is in your demo

I’m trying to recreate the header as it is in complex demo in both desktop and mobile however it’s displaying differently. Could you take a look at why? For example in mobile the search bar is not above the other elements.

I see it like this

https://prnt.sc/p48vvp

Although I have imported the header from the provided sample file.

This ticket does not depend on any other tickets.

Gavriil Tziotzis (gabtzi) 10 Sep 2019, 14:50

If you could provide me with the sample export you have on your demo site for complex view it would help a lot

Gavriil Tziotzis (gabtzi) 11 Sep 2019, 12:51

Thank you it's much closer to your demo look and feel however it's still broken. The search button especially and the minicart. Check this screen

https://prnt.sc/p4ohzd

Marek (marek) 12 Sep 2019, 12:08

Try following CSS:

@media (max-width:500px) {
#header #search_widget {margin:0;min-width:170px;}
#header .widgets-row>.pk-widget {margin:0}
#header .widgets-row {align-items:center}
.pk_cl ul {display:flex;margin-left:20px}
.pk_cl li {margin-left:15px}
}

The result is like this: https://take.ms/uRhSL

Gavriil Tziotzis (gabtzi) 14 Sep 2019, 09:56

Hi, this is still different than your demo though where the search bar is above the icons for login cart etc

Gavriil Tziotzis (gabtzi) 16 Sep 2019, 06:49

I'm trying to replicate using addition classes however the classes I add appear in a spot they're pretty useless at regarding layout.
https://prnt.sc/p6lowl

Is it possible to move them from the inner widget-module div to > pk-widget widget-module div?

Gavriil Tziotzis (gabtzi) 16 Sep 2019, 07:25

It took me quite a while but I managed to handle it in a way that could present a good result. The main issue comes from the flex view and direction. It's impossible to select different flex direction for each column in each responsive view. The same one is maintained throughout the responsive widths.

Loading...