How to set up a proper sticky menu using header?

Support
#1

Hello to the team at Themeco.

Sorry i am not a professional web designer but i am using X Theme for a professional website : http://www.kuzola-lefilm.com/ , based on the “band” demo.
When i created the website, i couldn’t manage to get a sticky menu at the top. So i created a section on top of each page with a “navigation inline” element, and i set up the third party “sticky menu” plugin to lock it in place.

Today i figure this is not a good option, as my top menu is not responsive. I would like to get back to a 100% X Theme solution with a fixed top-menu, but i cannot manage to do it…

I have read it is possible to set up a fixed header using Cornestone, which i did.
But i think my problem is that the header is not showing on my pages… I don’t remember if i did remove it when i created my custom-made sticky menu, in order not to show 2 different menus…

How can i get the header to show again on all pages? What should i do to make sure the header is showing properly?

Thanks for your help.

#2

I have creatd a new page with nothing, and it shows header & footer :
http://kuzola-lefilm.com/dvd/

So it means there is something set up on the rest of my pages in order not to display the header… Any idea?

#3

Hi,

You might have selected a template with No Header.

Please check template under Page Settings

Thanks

#4

Yes , you are right !
I just changed the home page to “header, footer” and the footer is back :
http://kuzola-lefilm.com/

Unfortunately, in the header customizer, i cannot change all the details i would like to…
How can i change the header background color to an image, and how can i change the background color of the secondary menu?
I suppose it is in the CSS panel?
What should i put and/or edit for that?

Thanks!

#5

Hi Céline,

Thanks for updating the thread!

You can change the background color to image through CSS.

The CSS should be like this.

.masthead .x-navbar {
background: url(image path) !important;
}

Add you image URL in place of image path.

To change the submenu background please use this CSS.

.desktop .sub-menu {
background: #ccc !important;
}

You can add your color code over there.

Please add both the CSS to Theme Option -> CSS

Hope this helps!

#6

It worked, thanks a lot.

Few more question :

  • How can i set a different color for the text/links of the dropdown menu ?
  • How can i set a different color for the text/links of the dropdown menu when hover ?
  • How can i set a slightly bigger size for the text of the dropdown menu ?
  • How can i have no box around each text/link in the mobile menu?

Many thanks!

#7

Hi Céline,

Please use this code:

.x-navbar .desktop .sub-menu li > a, 
.x-navbar .mobile .x-nav li a {
    color: #fff;
    font-size: 14px
}

How can i set a different color for the text/links of the dropdown menu when hover ?

.x-navbar .desktop .sub-menu li > a:hover, 
.x-navbar .mobile .x-nav li a:hover {
    color: #efefef;
}


.x-navbar .mobile .x-nav li.menu-item-has-children ul a {
    border: 0;
}

Here are some related links for further reading:

Hope this helps.

#8

Thanks again, we’re close to perfection !

With your help, i managed to remove the border of the secondary menu on mobile, but main menu still gets borders, how can i remove it for all menu on mobile?

Also, how can i can change the color of the text/links on the mobile menu?

And how to change the dropdown button color on mobile?

Many thanks.

#9

Hi Céline,

Please add the code below in Theme Options > CSS

Main menu still gets borders, how can i remove it for all menu on mobile?

.x-navbar .mobile .x-nav li>a {
   border:0;
}

how can i can change the color of the text/links on the mobile menu?

body .x-navbar .mobile .x-nav li a {
    color: red;
}

how to change the dropdown button color on mobile

.x-navbar .x-btn-navbar {
   color:red;
}

Hope this helps.

#10

That really helps, thank you !

One last thing : how can i set a smaller space between the different lines of the menu on mobile? Can i set this up?
And how to get the menu on mobile in bold style ?

Thanks !

#11

Hi Céline,

Please update this code:

body .x-navbar .mobile .x-nav li a {
    color: #505050;
    font-size: 20px;
}

to

body .x-navbar .mobile .x-nav li a {
    color: #505050;
    font-size: 20px;
    padding: 2px;
    font-weight: bold;
}

.x-navbar .mobile .x-nav li ul {
    margin-left: 0;
}

Hope this helps.

#12

All done, perfect !

You guys made my day.
Thanks for this great support.

#13

You’re most welcome, Céline. :slight_smile:

#14

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