Support Forums

Forum Navigation
Please to create posts and topics.

Custom Header Menus

Hi Doug

Please help!!!

As suggested I have created a global header menu section for my site https://redshift.site/islandtribe, but I'm having some issues?!?

  • How do I get it to behave like the default menu to remain fixed at the top of the page and shrink on scroll?
  • How do I stop the menu list from breaking onto 2 lines?
  • How do I use a | to separate the menu list items?

Regards

Greg

 

Hi Greg,

You stop it from breaking into 2 lines by making the logo smaller. In the size settings there is a "max-height" setting for the logo. I did this for you.

Once you have the menu right, duplicate the row but set the new one as "fixed" to the top (advanced position settings) and make it smaller (less padding, smaller logo etc). Then add a scroll effect to make it "appear" on scroll. Or use z-index to get the one to reveal the other.

And for a "pipe" to separate menu items use this css:

ul#menu-main-menu li:not(:last-child) {
border-right: 1px solid #f05024;
}

Thanks

Doug

Hi Doug

Thanks, I had tried the logo re-sizing, but it didn't help until I added the CSS display: flex; to the module.

I've already tried the CSS suggestion to use a border as a 'pipe' separator, but it doesn't give the desired affect (see attached image).

I found some CSS the adds an actual 'pipe' character, but can't figure out how to get it to work on my page:

/* Style the separators */
.et_header_style_left #top-menu > .menu-item + .menu-item:before,
.et_header_style_centered #top-menu > .menu-item + .menu-item:before,
.et_header_style_split #top-menu > .menu-item + .menu-item:before, #custom_header_menu > .menu-item + .menu-item:before
{
position: absolute;
left: -15px; /* Half of default 22px right padding and 4px adjust to center (to compensate for space char between li) */
content: '|';
font-size: smaller;
color: #f05024;
}

Then for the on scroll menu, I presume I would have to do this for both the new 'secondary' and 'primary' menus?

Regards

Greg

Uploaded files:
  • You need to login to have access to uploads.

Hi Doug

I managed to come right with the 'pipe' separators 🙂

I'll play with the on-scroll menu idea.

Regards

Greg