Quote from Doug Hoseck on September 8, 2020, 8:26 AM

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

Quote from icemanx13 on September 8, 2020, 9:20 AM

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

Quote from icemanx13 on September 8, 2020, 12:04 PM

Hi Doug

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

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

Regards

Greg