Split mobile "topbar" and "bottombar" in 3

Dear,

May I understand why on the mobile version of the header builder, you’re not spliting the topbar & bottombar into 3 columns?

These should please be split. This is causing us to not be able to implement certain ideas of header for our sites.

At least on my side, I would like to be able to have those lines being split in 3. Why don’t you split them?

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Usually, there is no enough space to split them into three columns and in most cases, one column is enough on mobile devices. That is why we made it this way to optimize the performance.

Kind Regards

Dear,

I’m sorry but I don’t agree with the answer.

1) the term “usually” doesn’t really matter to me, all that matters are the ideas that we could implement no matter what someone else would consider “usual” or not => and in this case, my idea is not “usual” and I’m happy that they are not usual otherwise i’d just be copy-pasting what other people do

2) since you don’t see any added-value to this change, let me explain you why it has a value, so please have a look at my live site in private :

=> on desktop, I defined 3 levels of header (without any issue exactly as I wished)
=> on mobile, I defined the center level with
left: mobile burger
center: logo
right: cart

however, your decision to NOT split the top and bottom level on mobile is forcing me to make this burger/logo/cart at the center level whereas I want to do it at the topbar level

why do I want to do it at the topbar level? because then, i can move everything a level up => so I could move the content that is currently in the bottom bar into the center level, and I’d have the bottom bar free where I could add the same widgets that is currently available in the desktop bottombar

this is a REAL business case from a REAL user, which is impacted by your decision that thinks that “usually” it’s not necessary to do something

please don’t take “usual” things or theoretical things for granted, and take this feedback as a voice from all your users and split those columns in 3

if there is one thing I hate the most it’s usual things 🙂 that’s why I chose your theme, because I know we can do anything with it

Thanks for your time

Dear,

Once you’ve analyzed my response, please switch my screenshot attachments as private.

Thanks

OK, try to add all three elements to the top bar and we will check what we can do with that using CSS.

Dear,

I’ve created a staging where I disabled most plugins & customizations, expect if related to header. More explanations in the screencast in private

Thanks

Try to add the following code snippet to the Custom CSS area in Theme Settings to do this

.whb-top-bar-inner .whb-column.whb-col-mobile {
  justify-content: space-between;
}

Thanks, seems good for the topbar.
Can you provide me the same for the middle header? I need to also to be covering the full width

Attachments:

You must be logged in to view attached files.

Add the following CSS as well

.whb-general-header .whb-mobile-center {
  width: 100%;
}
.whb-general-header .whb-mobile-center .woodmart-search-form {
  padding: 0;
}

PERFECT!
Thanks, you can close this ticket

[Author]

Posts