Assign a Global Header

Support
#1

Hi I am receiving these messages when accessing Header & Footers through Theme Options, can someone please advise

Screen Shot 2020-09-24 at 08.32.27 Screen Shot 2020-09-24 at 08.32.42

I have assigned headers and footers already

Screen Shot 2020-09-24 at 08.32.55 Screen Shot 2020-09-24 at 08.33.20

#2

Hello Kelvin,

Thanks for writing in! Have you created a custom header/footer yet? If you did, you must assign it as your global header/footer or leave it as is if you want to stick to the default header/footer of your site. For more details about header or footer, kindly check this out:

Hope this helps.

#3

Hi @ruenel,

As per my original message and images attached, I have already done that.

#4

Hello Kelvin,

It seems that you haven’t assigned any header/footer yet because you are still seeing the message in the Theme Options. 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
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

image
image1040×250 17.4 KB

Regards.

#5

Hello Kelvin,

I have checked your Header and Footer builder. The “front page header” custom header and the “Footer” custom have been assign to the homepage and to the selected page. You must assign them as global by clicking the “Make Global” button or leave it as is if you only want the custom header/footer in the selected pages.
SVwQFmZlT8SMsa55Jzp_Jg

By the way, may I ask what you really want? Do you want to use the default header/footer or you want to use your custom header/footer globally?

Kindly let us know how it goes.

#6

OK thank you.

That did not make sense in the original instructions. Perhaps someone should look at making that clearer. I assumed that “MAKE GLOBAL” was a heading and not a button.

I want my footer to be global.

I also want my navigation bar to be global, but it does not look like it is possible to have a transparent navigation bar over a section/image with out including it in the header setup. Is this correct?

So I will have to make multiple headers for each page

#7

Also can you tell me how to change the style of a menu item. I know this was possible with previous versions but unsure of how to target it with pro.

Previously I used, but I am trying to switch my headers over to the pro elements.

 .x-navbar .desktop .x-nav > li.menu-item-fill > a > span {
color: #ffffff;
border-color: transparent;
background-color: #076785;
font-family: "Open Sans", sans-serif;
font-size: 97%;
}
#8

Hello Kelvin,

Thanks for the feedback. It has been noted.

Please keep in mind that once a header or footer has been assigned as “Global”, it will show in the Header or Footer overview as shown in the image below:
zsJoZ-_6QEmmjN07SXkRTA

And in your case, you are seeing “Multiple Assignment” which means that it has been assigned to one or several pages.

Meanwhile, the custom CSS above is not necessary with the custom header or footer because with the Navigation Inline element or any navigation element that you are using in the header or in the footer, you can set the colors, border, padding, etc for the Top Links (menu items) and Sub-Links (sub-menu items). You can check it out in the element inspector:

pBqY7njER6KISR6NZAXGSw
pBqY7njER6KISR6NZAXGSw1194×322 203 KB

Hope this makes sense. Thanks.

#9

Thanks @ruenel,

  1. Am I correct in saying that a navigation bar can not be placed over a section element using the functions in pro?

  2. I understand I set the colours, borders padding etc… but I only want to change the style and look of one Top Links (menu item) so it stands out. Like this

Screen Shot 2020-09-24 at 10.32.33
Screen Shot 2020-09-24 at 10.32.33788×118 21 KB

#10

Hey Kelvin,

1.) You are incorrect. You can set the bar in the settings to be positioned as sticky and absolute so that it will stay on over a section. Kindly check out our video tutorials here:

2.) If that is the case, you can apply the element CSS within the navigation inline element by adding this as an example:

$el > li.menu-item-fill > a > span {
   // your styling here
}

Assuming that you already have placed menu-item-fill class in one of your menu items via Appearance > Menus.

Hope this makes sense.

#11

Thanks I will have a look at the tutorial

The CSS target doesn’t work. But I was able to achieve it with this

.x-menu > li.menu-item-fill > .x-anchor { }
#12

We’re glad that you sorted it out Kelvin.

Cheers!

#13

I spoke too soon, that is only targeting the outside of the element not to whole thing…

Is there another CSS target

#14

Hey Kelvin,

You can use the following selector instead to target your menu item .x-menu .menu-item-fill > a .x-anchor-content

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#15

Thanks @nabeel,

I have gotten the CSS selectors, that is why I thought I had solved the problem.
however the problem still arises as the CSS Selectors are either targeting the element container or the text. I can add two different CSS codes, but the problem arises when I add a :hover to it, as it will only change either the text or the container and not both at the same time, which is what you would expect from a menu

#16

This CSS seems to work

.x-menu li.menu-item-fill > a .x-anchor-content .x-anchor-text-primary {
  margin-right: 1px;
}

but a right margin needs to be added as it gets cut-off

#17

Hello Kelvin,

I checked your site and your code seems to be working fine, I don’t see the cut-off issue while hovering so i believe you have been able to fix this.

I noticed you’re using Pro so you could simply add a button in your header adjacent to your menu, this would also help you to avoid the CSS.

Cheers!

#18

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