X-Pro - change header left bar width based on which container is visible

Support
#1

Hi Support,

X-Pro: 1.1.0
WordPress: 4.8

I’m working on a header that has a top and left bar. In the left bar I have two containers. One displays at the three highest breakpoints and the other displays at the two smallest breakpoints. What I would like is for the width of the bar to change based on which container is displayed.

At the three highest breakpoints it should be at least the width I’ve set it to now, so it looks like a regular sidebar menu, and on the other two breakpoints it should look like a narrow sidebar with a hamburger menu, no more than 5em wide. (In my example it’s called ‘menu’, though I may revert back to the hamburger icon).

How can I accomplish this?

Here’s an example for you to look at. (It only works on this page.)
https://staging.theprolificreader.com/action-adventure/

I’ll have a few headers like this with different menus to access different areas of the site.

Thanking you in advance,

Mel

#2

Hi there,

Thanks for writing in.

I tried some workaround but it’s currently impossible for me to do it and it’s a bit complex. It does need something like a scroll spy (similar to one page) and triggers the class for the navbar. I could forward this as a feature request but you may consult it to a developer for immediate implementation.

Thanks for understanding.

#3

Thanks for getting back to me.

FYI I didn’t get an email saying there was a reply. I actually came back to add the following comment:

I’ve spent hours googling and trying various things and finally found that applying the various breakpoints to the bar (using CSS of course) worked.

Here’s the CSS I applied:
@media (min-width: 1200px) {
.hm15.x-bar {
width: 14em !important;
}
}

@media (max-width: 1199px) {
.hm15.x-bar {
width: 14em !important;
}
}

@media (max-width: 979px) {
.hm15.x-bar {
width: 5em !important;
}
.hm15.x-bar-space {
flex-basis: 5em !important;
}
}

@media (max-width: 768px) {
.hm15.x-bar {
width: 5em !important;
}
.hm15.x-bar-space {
flex-basis: 5em !important;
}
}

@media (max-width: 480px) {
.hm15.x-bar {
width: 5em !important;
}
.hm15.x-bar-space {
flex-basis: 5em !important;
}
}

The only other thing I had to do was change the left margin of the container that held the hamburger menu to -9em.

I thought my solution might help someone else (who is just as technically challenged as me), hence adding this comment :slight_smile:

#4

Hi @mtomlin,

Wow! this is great. It would really help others.

Thank you so much.