Header Bar "Content Max Length" seems doesn't work

Support
#1

Hi Support

Following Donald McGuinn video about “rebuild Apple’s menu”


I’ve created a Sub Bar with same behaviour…

BUT I have TWO Issues:

FIRST ISSUE
I’ve set my Sub Bar “Content Max Length” to 1200px with “Content Scrolling” ON.
Anyway, on Screen larger than 1200 px, Sub Bar Content exceeds 1200px on right.
I’d like the Sub Bar Content SCROLL INSIDE 1200px Content Max Length

SECOND ISSUE
Content scrolling and all, works fine on Google Chrome and Firefox (except first issue),

but it doesn’t work on Internet Explorer:

where I have a “JAM of Items”

I hope you can hale me in order to fix these two issues

Thank You

#2

Hey @agenzia.gamma,

Regarding the first issue, that is normal because that is how content scrolling works. You can see that if you scroll, the Content Max Width will be ignored on the left. What I recommend is setting the Content Max Width to none and let your icons span fullwidth for visual balance.

For the second issue, I’ve spent some time configuring the layout in IE and the cross browser compatible setting is your Container’s Self Flex and Menu’s Item Flex must be set to Fill Space.

Thanks.

#3

Hi Christian

Thank You very much for your precious support and for your time!!!

Is there any way in order to scroll INSIDE Content Max Width of the Bar?

Thank You again

#4

You’re welcome.

Out of the box, no. It could be possible with custom development but that would be outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at [email protected] if this is of interest to you.

Thanks.

#5

Dear Christian

I thank you a thousand times for your precious help and for your time…

BUT I honestly have to confess to being a bit disappointed snd confused with:

  • your reply that my request is out of the scope of your support
  • the number of confirmed bugs of new PRO version (you can check my other topics where PRO support has confirmed reported bugs or fixed with temporary patch)

Please, could you check better if you could do something for me?

Thank You again

#6

Hi there,

I’m confused about what you’re trying to do so before I reply to your last question, please add this to your header custom CSS and please check that first it’s correct since you wanted to scroll within 1200px.

.hm29.x-bar-scroll {
    max-width: 1200px !important;
    margin: 0 auto  !important;
}

I tried and it works, I can’t rule out that this is a bug since the Content Max Length option is for header bar’s content and not for header bar itself. And maybe the header bar is intentionally made with 100% width. But I’ll try confirming it :slight_smile:

Thanks!

#7

Dear Rad

Thank You for your precious support

This is exactly the result I hoped to get.
Thank You again.

Just a clarification about:
This is my second fix/patch/customization suggested from support for Header Bar:

1st: suggestion in order to resolve a Mobile Sticky Bar issue

/* Mobile Sticky Bar temporary fix */
.hm20.x-bar {
  transition: all 1s;   
}
.hm20.x-bar.x-bar-fixed {
  top: 0px !important;   
}

2nd: Suggestion in order to fix Content Max Length issue

.hm29.x-bar-scroll {
    max-width: 1200px !important;
    margin: 0 auto  !important;
}

My questions are:

  1. Every time I edit an Headers (I have 3 different Headers in my Site) the hm(number) class change?
  2. The suggested CSS is better to be added to header custom CSS or Global CSS? For example 1st suggestion is common to all my three Headers
  3. If I have 3 Headers: for 1st suggestion (that is common to all my three Headers) I have to insert three different fixes?

Thank You

#8

Hi,

  1. You can add a unique class to your bar

Then use it in your css

/* Mobile Sticky Bar temporary fix */
.x-bar.my-bar1 {
  transition: all 1s;   
}
.x-bar.my-bar1.x-bar-fixed {
  top: 0px !important;   
}

That way it will not change when you edit your header.

  1. It’s better to be added in Header Custom CSS as it pertains to yourheader

  2. If it’s common, you can add the class to your bars.

Hope that helps

#9

Thank You Paul

Thank You for your precious suggestion

Just to clarify better:
I have 3 Headers on my Site:

1st Header

  • Top Bar A
  • Menu-Bar B

2nd Header:

  • Top-Bar A (same as 1st Header)
  • Menu-Bar B (same as 1st Header)
  • Sub-Bar C

3rd Header:

  • Top-Bar A (same as 1st Header)
  • Menu-Bar B (same as 1st Header)
  • Sub-Bar D

("A and B Bars are common to all 3 Headers)

The suggested CSS refers to common Bars (A and B), BUT, as suggested, if I add to “Header Custom CSS”, I have to add it THREE times for each of THREE Headers.

Is this best practice?

Thank You

P.S.
In my scenario (3 Headers with A and B common Bars) if I edit the A or B Bar into 1st Header, which solution is better in order to propagate the editing into 2nd and 3rd Headers.

Now, each time,

  1. I clone 1st Header to a 2nd and 3rd Header,
  2. than I edit 2nd Header and recreate (from baginning) the Sub-Bar C
  3. than I edit 3rd Header and recreate (from baginning) the Sub-Bar D
    Is there any more easy solution?

Thank You again

#10

Hi,

Thank you for the clarification.

In that case you need to add you CSS Codes in Theme Options > CSS also referred to as Global CSS

With regards to creating your Headers, you are doing it right. I can’t find a way that is more easy than your process.

Thanks

#11

Thank You very much Paul

#12

Glad we were able to help :slight_smile:

#13

Dear Rad

Thank You for your suggestion

.hm29.x-bar-scroll {
    max-width: 1200px !important;
    margin: 0 auto  !important;
}

It fix the problem of “scroll within 1200px”.

But “hm29” class change every time I edit something into Header.

Just for example, now I’ve deleted another element inside the Header and my Bar has changed its class from “hm29” to “hm27”.

I’ve tried to set a custom class into “Bar > Customize > Setup > Class” but seems it doesn’t work because I need a sub-class (my-class).x-bar-scroll

Any suggestion?

Thank You

#14

Hi There,

You are correct on adding class on Bar > Customize > Setup > Class then CSS should be:

.my-bar .x-bar-scroll {
    max-width: 1200px !important;
    margin: 0 auto  !important;
}

This line means: .hm29.x-bar-scroll hm29 and x-bar-scroll are two class that exist on the same element. If you will add my-bar class on the Bar > Customize > Setup > Class, see that on suggested CSS, I have added space between .my-bar and .x-bar-scroll. This means we are looking for x-bar-scroll class inside the bar with class my-bar.
.

Thay way you don’t have to worry about changing it everytime you update content of that header.

Hope this helps.

#15

Thank You Lely

It’s OK now

#16

Glad to hear it!

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.