PRO: Set absolute or minimum width of header-container

Support
#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!

#21

Funny thing, that a “align right” makes things align left :wink:

Thank you for your great help, that’s been the problem, I guess I wrote this while trying to get it solved by myself and forgot deleting it.

Now everything works fine!

Cheers

Uli

#22

You’re most welcome.

#23

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