PRO: Set absolute or minimum width of header-container

Support
#1

I’d like to do the following in a PRO header:

I Have a bar with a max length of 1200px,
in this bar a container with a green background, that contains a 200px logo on the left and that should use 100% of the available width, so a green rectangle is shown right of the logo.

So I’m looking for a “widht” or “min width” setting for the container, but I find only a max width and max height.

If I placed a gap-content-element with 1000px incide the container, it looks like expected, but that’s not responsive, cause the gap always keeps it’s width regardless of the viewports width.

Another workaround is setting a padding-right of 1000px to the container, but that’s not responsive …

So how can I solve this?

Best regards

Uli

#2

Hi Uli,

Thanks for reaching out.

Would mind providing the sample URL that has this header and a mockup design of what you wish to achieve? It’s just a bit confusing as you wish to achieve versus of what you already tried are opposite. Please note that width and min-width aren’t responsive since it’s not going to resize smaller than that. While max-width is responsive since it has no restriction for smaller width or devices, and its only restriction is for larger views (hence, max-width). Perhaps what you’re referring is full-width (100%) and not actually the responsive nature of the layout which both are different.

And yes, having a 1000px width or 1000px min-width is the same as adding a gap with a width of 1000px. Both will keep their width regardless of the viewport. And it’s a bit confusing to me why you have to make it responsive but you want to set its width. More information and samples will be helpful :slight_smile:

Thanks!

#3

Hi Rad,

of course a fixed 1000px is not responsible, but I’d like to have a 100% (wich ich 1000px in the desktop-view). The 1000px are only a workaround to get at least the desktopview right.

I’ll send you a secure note with the URL.

Uli

#4

Hi @ULinn,

Please try with this solution.

  • Add the my-container class to your container:

  • Then add this custom CSS:
.my-container.x-bar-container {
    padding-right: calc(100% - 282px);
}

Note: The 282px should be the width of your logo.

  • Result:

Regards!

#5

Hi Thai,

great, that solved the problem.

But I think it’s not necessary to use custom css - i just did enter
calc(100% - 282px)
in the padding-right field of the container’s settings - worked like a charm.

Or is there any reason, why adding css would be better?

#6

Hey Uli,

What you did is also a good option. What Thai suggested is another approach to add the padding to the bar but both process should work the same.

Cheers!

#7

Now whre the green box works, I’d like to place a menu toggle (Navigation dropdown) inside for smaller viewports. I’m trying to get this aligned right - but with no effort. I tried several settings in the self-flex and flexlayout section of the toggle and the parent containert, but the toggle remains on the left.

If you want to have a look, choose a viewport smaller than 767px.

Best regards

Uli

#8

Hello Uli,

Please be advised that Navigation Inline and Navigation Dropdown elements are best to use for desktop screens. For smaller screens, you may use Navigation Collapse, Navigation Layered or Navigation Modal.

Hope this helps.

#9

Hi RueNel,

thank you for your advice, what navigation-element to use. But also the three recommended elements have I toggle, that I can’t place on the right of the container.
Right now, i don’t need help with the menu, but with the placing of the hamburger-icon.

Best regards
Uli

#10

Hello Uli,

​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look at your header settings? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

#11

See secure note …

#12

Hi Uli,

To be able to put something in on the green part, you need to separate your existing menu into a separate bar.
Then have your first bar have two containers, on the left container is your logo and on the right will be your green area with your mobile button.

For visual reference.

In the image above, red is bar and green is container.

Hope that helps

#13

Hi Paul,

thank you for your effort, but that’s not the information I needed. The desktop-view is perfect as it is, the problem is - as written above - the hamburger-icon (toggle) in the mobile view.

If you want to have a look, choose a viewport smaller than 767px.

Best regards

Uli

#14

Hi Uli,

Please try adding this element CSS to the container of menu toggle:

$el {
    right: 15px;
    position: absolute !important;
}

Let us know how it goes!

#15

Hi Thai,

great, looks as expected, thank you. But now the off-canvas is shown empty. Without your css, the menu in the off-canvas is shown correctly, with your code, I only see a white space …

Any idea how to improve the css?

Uli

#16

Hi Uli,

It seems you’ve changed to the Navigation Collapsed element, please the element CSS to the Navigation Collapsed element instead:

a$el.x-anchor-toggle {
  right: 15px;
  position: absolute;
}

Hope it helps :slight_smile:

#17

Yes, I did change, but the off-canvas was also wrong before.

But now it looks perfect, thank you very much for your great help!

Probably it would be a nice idea, to be able to position such elements left, center or right without manual .css and the time of the support-team. Can you note this as a feature-request?

Best regards, have a nice weekend!

Uli

#18

Hello Uli,

Your feedback has been noted and added in our feature request so it can be taken into consideration for future development.

Best Regards.

#19

Hello RueNel,

in between I noticed, that your solution seems to work only in the header-editors preview. If I open it in the page-editor or outside the editor (in firefox and chrome), the burger-icon remains on the left side and I can’t find the added .css in my .css inspector.

Any idea whats wrong here?

Best regards

Uli

#20

Hi Uli,

Please delete the element CSS of your container.

It’s missing the { and } brackets so it makes another element CSS not working.

Regards!