How to fix Header

Support
#1

We are able to have the header and menu we want on all pages except the product page.

If you view lefthandwilly.com/music, you will see the header and black sub-menu beneath.

However, if you add an item to the cart, you are taken to the product page.

We cannot seem to have the same header on the product page as we have on the other pages.

Any suggestions are welcome. Thanks.

#2

Hello Grant,

Thanks for writing in!

Your Music page, lefthandwilly.com/music, were created using the Elementor page builder. That includes the logo and menu where created in Elementor builder too. Please be advised that we are not familiar with this builder.

Your default navbar is inline. Please go to X > Theme Options > Header > Logo and Navigation and change it to “stacked”. And you can change the background color of the navbar in X > Theme Options > Ethos.

Hope this helps.

#3

Thanks, looking somewhat better. But still on the product page, we would like our own menu as opposed to the menu that is currently there.

Is there a way to do that? i.e. remove the default menu and put in our own menu.

This only happens on the product page.

Thanks.

#4

Hey Grant,

What’s the name of your menu? Please go to Appearance > Menu and make sure that the menu you have set in the Music page is also assigned as your Primary menu. Once you do, then you will have the same menu for your product page and other sites too. If necessary, you can add some css styling to match it. At this point, assign the menu as your primary menu first so that we can see the results.

Regards.

#5

Thanks but it did not make the change.

#6

Hello Grant,

They do not have the same menu. Kindly provide us access to your 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

Thanks.

#7

Thanks, sent you a secure note.

Please note: We have a superfly menu which is the main menu called “Sidebar”

There is another menu called Store which is on only certain pages.

We would like the Store menu to appear on the product page similar to what is on the music page.

Thanks.

#8

Hello Grant,

Your menu was created in Elementor.

Keep in mind that Elementor is a 3rd party plugin. Any changes you may have done to the menu will only be applied to that Elementor Menu element and will not affect the default X theme menu navigation.

I have resulted to use a custom css to replicate the styling of the menu. I have added this custom css instead:

/* Navigatiom menu styles */
.x-navbar {
    background-color: #000;
}

.x-navbar .desktop .x-nav>li>a {
    border: none !important;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 #ff2200;
}

.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .sub-menu a, 
.x-navbar .mobile .x-nav li > a, 
.x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
    color: #d4b116;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu a:hover, 
.x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, 
.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, 
.x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
    color: #ff2200;
}

body .x-navbar .desktop .x-nav > li > a {
    height: 46px;
    padding-top: 25px;
}

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

CSS Selector Reference
How to find the css selector in chrome

Thank you for your understanding.

1 Like
#9

Thanks for all your help. Very much appreciated.

It looks much better and we will definitely checkout the links provided above.

I think it would be useful to have the option of turning off the Header and Footer that comes with X-Theme in case someone wants to use their own Header and Footer.

Thanks. your support is always helpful

#10

Hello Grant,

I think it would be useful to have the option of turning off the Header and Footer that comes with X-Theme in case someone wants to use their own Header and Footer.

Actually, you can do that on normal pages only. Simply edit the page and change the page template to Blank - No Container | No Header, No Footer. For more details about the different page templates in the theme, please check this out:

Hope this helps.

#11

Thanks, yes that is what we did. I think it would be useful on the product pages.

That may be a Woocommerce thing, but I think it would be helpful.

Thanks.

#12

You are most welcome!

#13

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