Problem with menu not centering on larger screen widths

[DesignMunky]

Hi guys,

I have a site I’m building and the menu won’t center on larger screen sizes. I’ve set the menu bar to a max-width of 1200px using the element CSS but can’t get it to center after 1200px.

This is the site. http://hansoncatering-co-uk.ch-it.co.uk/

I know its not yet a secure site - the client hasn’t got their SSL sorted yet.

Cheers,
Darren.

[ruenel]

Hello Darren,

Thanks for writing in! To get your issue resolved, please remove your custom CSS and set the maximum width in the Bar element settings instead. You also need to set the Flexbox vertical alignment to the center.

If this does not help, please provide us access to the site so that we can check your header element settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[DesignMunky]

Hi,

I’ve sent you login deets. Setting the max width at the element only set the max width of the content inside the bar. The bar itself did not change.

Thanks

[christian]

Hey Darren,

Upon checking, your menu is already centered between your logo and the social icons.

What Ruenel suggested is for your Bar to be in the center of the screen. Is that what you need or do you need the Navigation Inline (menu) to be centered in the screen?

If you want the Navigation Inline to be centered, your desktop Containers’ Width should 33% each and their Flexbox Horizontal setting should be set to Center.

The result of that would look like the screenshot below.

Hope that helps.

[DesignMunky]

Hi Christian,

No the issue is not with the elements inside the header bar but the header bar itself. I can’t seem to get it to have a max-width of 1200px and remain centered for screen sizes larger than 1200px.

Currently the header bar is centered on the screen but I don’t want it exceeding 1200px in length.

[christian]

Hey Darren,

Thanks for the clarification.

There’s no option to restrict the Bar’s width unless you modify the Bar using custom CSS which regretfully is beyond the scope of theme support. So in that case, since it’s the Bar Content that is restricted to a Max Width of 1200px, your setup should be this:

Bar (Transparent Background)
  Container (White Background with Border Radius)
     Desktop Logo (Image element)
     Mobile Logo (Image element)
     Desktop Menu (Navigation Inline)
     Mobile Menu (Navigation Layered or Collapsed)
     Social Icons

If you notice in that structure, you’ll only have 1 Container. The rest of the elements should be inside that Container.

Thanks.

[DesignMunky]

Hi Christian,

I get help with custom CSS suggestions from support here all the time. In fact most of the tickets I browse through to find answers here have support staff offering CSS suggestions. Is that no longer case?

If Themeco is no longer offering help with CSS I’ll have to rethink whether to continue using the Pro Theme. It’s one of the main reasons I continue using it - have purchased 18 Licenses to date.

[christian]

Hey Darren,

We do provide custom CSS suggestions if it’s simple and if it won’t conflict with anything. For your case, you will need to use custom positioning of the Bar and that might cause layout problems.

It is important to note that custom CSS development is not a part of our theme support. You can see this line: “If You want custom code to change a core feature of the bar feature, that would not be covered.” in our Terms.

We appreciate you have lots of licenses but it is not sustainable for us to provide custom CSS to all customers. If you need custom CSS guidance, please consider subscribing to our One premium support.

Thank you for understanding.