X theme menu divided with logo in middle?

Hi everyone!
I’ve seen this done a number of places and wonder if there’s a simple way to do it with x-theme.
I’d like to have my logo in the middle (linked to homepage) with the main nav menu divided up to the right and left of the logo.

Here’s the vision: https://www.dropbox.com/s/sxsajt1xnq5qk5s/2020-ATW-HOMEPAGE-mockup.jpg?dl=0

Here’s how it is on my current site: www.amytwon.com

Thanks so much!
Amy

Hi Amy,

Thank you for writing in, yes that is possible with PRO header builder, the idea is to have 3 Container, two containers for the menu (so that means you need to separate the menu items), and the center container will have the logo. You can have a better idea from the video introduction here, jump at 28:35 mark.

You can easily link any image on the homepage by just adding slash / on the URL field.

Hope it helps,
Cheers!

Hi Friech,
Thanks for you reply!
I don’t have PRO, I’m using regular x. Is this something I can’t do then? :frowning:

Hello @rotipom,

With X theme, you can only accomplish that by adding a custom image in your menu navigation. To get you started with, perhaps you can check out this link for some guidance:

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

Hi there,
So I’m testing pro on a staging site to do this (middle logo).
I managed to figure out the middle logo thing, but I’m having so much trouble with everything else. It’s so complicated and confusing.

A few things are not working, would appreciate some guidance. I’m watching the Youtube tutorials but it’s not really helping.

#1 PROBLEM:

Does anyone know if I can use a transparent png as a background lower layer?

I am trying to make this sticky SHOP header have a bottom ‘torn paper’ edge like I do on my current site: www.amytwon.com/shop

I can’t seem to get that edge to show here: https://vpzry3xn2p3.c.updraftclone.com/shop/
I’ve tried attaching is a background lower image in Bar and I also tried it similarly in container 4, it appears in bar but it’s not a transparent torn edge, just clean straight. In container 4, the image doesn’t appear at all at larger screens and is only around the hamburger menu in smaller screens.

#2 PROBLEM

I am having so much trouble with scaling the background hero image. Attached

is how it looks like in Editor.
But on preview page : https://vpzry3xn2p3.c.updraftclone.com/shop/ it’s zoomed in. Nothing I’m adjusting is working.

#3 PROBLEM

I can’t seem to make the sticky go OVER the hero image in Bar 2? The sticky only appears after the Bar 2 hero image.

And where do I adjust the responsiveness of elements/containers?

Thanks so much!

Hello @rotipom,

To better assist you with your issue, kindly provide us access to your staging site so that we can check your settings. Please 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

Regards.

Hi Ruenel,
Thank you, attached login/secure notes above!
Note I was able to attach a transparent png as a background lower layer in a fresh header design, in the Container rather than the Bar, and it works to show the torn paper edge but NOT over the Bar 2 hero image, only when scrolling down to rest of shop.

Also because of this I had to attach the inline nav as ELEMENTS within that Container instead of having separate Containers themselves and I can’t figure out how to line them up next to logo (and collapse into hamburger menus in smaller screens) like the sample template and in my vision jpg above.

Thanks so much!

Hi @rotipom,

The credentials of the site you provided is using X. Since you’re now building header with Pro, It’d be best that you provide your staging site’s credentials so we can take a look at your current setup.

However I checked your site and the sticky bar issue is just a z-index issue, Inspect your sticky bar in header builder and increase the z-index from 9999 to 99999 under Setup

image

Now you can follow Mobile Menu no toggle to show a mobile menu in smaller devices

Hope this helps!

Hi Nabeel, thank you for this!
Changing the z index works for making it go over the hero image below, yay!
But it doesn’t show the torn edge when in top default position.

I just updated login for staging site above. Let me know if it works, thanks!

Hey @rotipom,

The Initial Position of your first bar should be set to Absolute.

image

That will push the 2nd bar to the top of the screen because Absolute Positioned elements does not take space inside the page. With that said, you need to increase the top margin of your 2nd bar or elements inside it also. Check out the setup in the secure note.

Because you’re new to using Pro, I’d recommend that you watch Pro Header and Footer Introduction video and also read usage instructions in our Themeco Docs. You can also get website building tips in our Youtube Channel.

Hope that helps.

Hi Christian, thank you for this! The Youtube video is super helpful.

I’m trying to figure out a few things that is not consistent between the editor/builder and the site itself.

Here is how the builder view looks, the image is scaled correctly.

Here is how the live page looks, the image is so zoomed in, and the margin-top that I adjusted is showing. I can’t seem to find why the live page would look different from the builder view.

Here is another thing that’s happening on the mobile level. The sticky Nav bar has a gap above the bar in live view and normal in builder view. And also, there’s large gaps around image in live view that’s not in builder view.

Thoughts appreciated, thanks so much!

Bump, any guidance on why the builder view and live view would be different? Thanks!

Hello @rotipom,

The white space is coming from the 35vh top margin in one of your container where you have inserted the background image.

Please reduce it to at least 275 pixels instead and check your custom header again. Please do not forget to clear your caches first before testing your site.

We would love to know if this has worked for you. Thank you.

Hi Ruenel,
THank you so much for this! I tried it and it worked BUT the problem I was having with differing views between the BUILDER View and LIVE view is that when the editor window (where the Headers, Layout, Elements, Inspector tabs are) is attached to the rest of the builder, the preview I see is different than what I see in the live site. That’s why I couldn’t figure it out.
For it to look the same I had to detach the editor window from the rest of the interface. Is this a glitch/bug? Here is an image of the editor window detached:

Another curious thing is happening…I had duplicated the original nav bar with your instructions to make it sticky, so that I can create a mobile version. I’ve managed to make it look the way I want but I can’t understand why it’s not staying in place? Here’s a video I took : https://www.dropbox.com/s/cqiqwbiefnms3ez/20200401_211914.mp4?dl=0

Can’t figure out why it’s doing this? Thanks so much!

Hello @rotipom,

That is not actually a bug, that is the normal behavior for background image especially when you set it to cover.

Basically, if the background size is set to cover, the background image will automatically adjust according to the dimension of its container. That is why you see differences of the background image area shown depending on the size of width of the device you are using.

There are other values you can set for the background size. Please check this link:

https://www.w3schools.com/cssref/css3_pr_background-size.asp

So please note that setting a background image is quite tricky in the sense that you might not be able to have parts of the image completely show up the same way in all devices.

Hope this explains it.

Oh Jade, thank you very much! I’m not familiar with that so the article was super helpful!

Will you be able to help me with the sticky menu not working at mobile sizes? Q above in my earlier reply…Thanks!

Hi @rotipom,

I can see the dropbox video you share where the menu got missing while you scroll. This might be related to z-index. Checking from all previous link you shared I can’t see the actual issue. If this is the only issue here, it would be best to open a new thread. This thread is getting longer it is confusing now. No need to reply here. Just open a new thread where we can see the mobile menu issue. Thank you.

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