Hi there!

Would you please explain and clarify your issue a little bit more?

Here is your faq/documentation about dropdown menu of helix ultimate:

https://www.joomshaper.com/documentation/helix-framework/helixultimate/faq-how-to-do

But the navigation addon is different thing. So please describe your query with screenshot and your site URL.

Best Regards

Hi Rashida Thanks for your fast response. I will try to make it short. I wanted a menu header with a logo in the center and a menubar on both sides. Also I wanted a sticky header. transparant with scroll at to and white when scrolling down. the text in the menu should be white when transparant and black when white background. further the logo in the center should change image when scrolling. (due to color) See https://core-cph.com I couldn't see my way out using the pre-defined header or making one in the layout builder. therefore I jumped to the Navigation addon. and made a lots of custom css. Dont know whether that was the right choise. When ever the screen size goes to (burger) mobile, I have disabled (hidden) the tow menus on both side of the logo and made another (Navigation addon) menu that should have all the menu points. Now this menu, when clicking on burger, is too narrow for the men to be shown. if you go to https://core-cph.com on the mobile phone, you can see the issue. I dont know how to change the width of the dropdown menu. That came to be a very long description. I hope you understand the issue. Regards, Jesper

Hi. If you will allow my five cents... Your choice was erroneous. What you want to achieve must be done using the Helix Ultimate features and its menu. And this can be quickly redone using Helix capabilities.

Hi Pavel I really hoped I got that information like a month ago. but I didnt asked!! where do find that capabilities.

Do you mean to make an row/section in the layout builder in the template and make 3 columns with respectively the menu 1 - logo - menu 2. Then setup modules with menu's in the columns 1 and 3 and a module with image in middle columns. Then chose sticky menu in the template (basic header)

It doesnt come close to what I want.

Where can I control how the menu looks like (transparant with not sticky, menu text change color with sticky and pic change with sticky, or even to make it horizontal)???

Where it should look like this: Perhaps you could guide how the capability in helix work to make it happen.

Do you mean to make an row/section in the layout builder in the template and make 3 columns with respectively the menu 1 - logo - menu 2.

Almost so, but not quite. As far as I understand, you have enough skills to use CSS. Based on this, I give the following recommendations. Create a section with the name Header in Layout Builder. Create two columns in it with positions logo and Menu as it was by default in Helix Ultimate. Hide the Logo column for desktop. Create six menu items. Use the third menu item to display the logo, disable the menu item header display in it and add an image of the logo. For this menu item, use the URL type. Add "/" in the Link field, add to < li > element class (this can be done in the Helix Mega Menu tab). Hide this item for mobile using CSS. Configure Header and Menu using CSS. You do not need your own JS to switch the class when scrolling. Section named Header has this JS from the box and you can use it. At your disposal, these selectors are #sp-header and #sp-header.header-sticky.

In order that your code has no effect on a mobile device, place it in the media query.

@media (min-width: 992px) {
    /* your code goes here */
}

Setting the logo and menu for mobile devices can be carried out by means of Helix Ultimate.

Hi Pavel Thanks for your explanation. I am so excited to learn and convert my solution to a more friendly version. I have:

• Made a new section in Layoutbuilder (column 3+9)

• Named the section: Header

• Given the column (3) the module position: logo

• Given the column (9) the module position: menu

• Hidden the logo column on desktops

• Created 6 different menu's in the Main menu

• For menu items no. 3, I have chosen menu item type: URL

• Inserted "/" in the Link field

• (you wrote: disable the menu item header display in it) for the link menu, I can select "Add menu title: NO" in the "link type" tab.

• (you wrote: add to < li > element class (this can be done in the Helix Mega Menu tab) Hide this item for mobile using CSS) This I dont know how to do. Should I add a class name in the Mega Menu tab, and then display a image through the CSS, like a background-image? would it be posible to just add the logo via the "Link Image" in the Link type menu?

• I have made the menu sticky via the Template Option - Basic - Header.

• I have used this CSS to start with:

  #sp-header {
       Background-color: transparent !important;
        }

  but, it doesn't work. The body background color (white) is displayed. should I use -xxpx to move below section up, or do you have an helix template solution for that?

Question: If I need position for language selector, should that be a menu item also?

/Jesper

(you wrote: add to < li > element class (this can be done in the Helix Mega Menu tab) Hide this item for mobile using CSS) This I dont know how to do. Should I add a class name in the Mega Menu tab, and then display a image through the CSS, like a background-image? would it be posible to just add the logo via the "Link Image" in the Link type menu?

Hi, Jesper. If you need one image, you can add it via "Link Image".

If you need two images (change when scrolling), then you should use the background image via CSS. For example:

#sp-header .your_li_element_class {
    /*some other properties*/
    background-image: url(/images/before_scroll_img.png);
}
#sp-header.header-sticky .your_li_element_class {
    /*some other properties*/
    background-image: url(/images/after_scroll_img.png);
}

Question: If I need position for language selector, should that be a menu item also?

You can publish this module in Menu positions, and then configure via CSS with your menu to one line. Use Flex Box CSS in order to do it easily.

Hi Pavel Thanks, it is really working for me. thanks. do you also have a solution for the transparency over the first SP Pagebuilder section. Can I insert a minus (-60px) in the layout builder to move the Content under the menu? Or do you have a better solution? /Jesper

Guess Just make

sp-header: absolute

sp-header.header-sticky: fixed

thanks Pavel you have been a fantastic help.

You are wellcome