Sticky header help

Hello There,

Thanks for writing in!

Please edit your header and in the bar settings, please set the content length to 100%. The horizontal Flex layout setting should be “Space between”

1.) To get the menu to align to the right, please click the container of the navigation inline and set the horizontal Flex Layout to “End”.

2.) To get the logo to align to the left, please click the container of the logo image and set the horizontal Flex Layout to “Start”.

3.) Please go to Pro > Theme Options > Buttons and select Pill.

4.) Please disable the Content Scrolling in your bar settings so that the sub menu will display.

5.) In smaller screens, the navigation inline will no longer display correct because there aren’t enough space to display the menu items. You will need to hide the navigation inline and add navigation dropdown or navigation collapsed which should only be visible in smaller screens. You can show/hide elements using the “Hide During Breakpoint” option in each of the element settings. To know more about “Hide During Breakpoint” option, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.

Hello, it’s still not working out.

  1. The Logo still isn’t on the left.
  2. The Menu still isn’t on the right.
  3. The Drop downs are now partially displaying, but I need them to fully display.
  4. I have my buttons set as “square” in the global options, they should be square, but the button in the header is “pill” how do I set it as “square”?
  5. On mobile, it’s even worse. The content scroll is still on and the modal is now overlapping the logo.

Please assist.

Hello There,

1.) & 2.) You needed this: http://prntscr.com/kv5h84

3.) The dropdowns are now displaying.

4.) The button has its own default settings. You need to go to the border radius settings of the bottom and make sure that it is set to zero.

5.) I have made some change with your menu so that it will display nicely in smaller screens.

Please check your header now.

That is a lot better, but the menu items aren’t clickable until scrolling occurs. Is there a way to correct that?

Also, the “area off canvas” is still overlapping the header, is there a way to correct that?

The button doesn’t display on mobile, so can I disable that bar on mobile?

Finally, the submenus are displaying improperly on mobile, I need assistance there too.

Thank you so very much for all your help.

Oh, and I’m trying to have the submenus bg as white, then turn black upon hover, but they’re not displaying correctly. I will also need assistance with that.

Hi

That is a lot better, but the menu items aren’t clickable until scrolling occurs. Is there a way to correct that?

Set the bar(where your menu resides) z-index to a higher number than other bars

Also, the “area off canvas” is still overlapping the header, is there a way to correct that?

I checked and it doesn’t seem to overlap. Can you provide us a screenshot.

This is how it looks on my end

The button doesn’t display on mobile, so can I disable that bar on mobile?

You can set visibility under Customize tab

Finally, the submenus are displaying improperly on mobile, I need assistance there too.

Oh, and I’m trying to have the submenus bg as white, then turn black upon hover, but they’re not displaying correctly. I will also need assistance with that.

To make it black on hover, you can add this in Header > CSS

 body .sub-menu .x-anchor:hover {
     background-color:#000 !important;
     color:#fff !important;
}

Hope that helps

Hello, I input that CSS, and the submenu background is still all black, rather than white, then black upon hover. Please assist.

The following screenshots will show the modal overlapping the logo, and the submenus aren’t usable on mobile, I need to correct that.

Hi,

Please change the css code to this

 body .sub-menu .x-anchor:hover {
     background-color:#000 !important;
     }

 body .sub-menu .x-anchor:hover .x-anchor-text-primary { 
    color:#fff !important;
 }

This is how it looks when I aadded the CSS

You need to add it in Header > CSS

The element Navigation Dropdown is not ideal for menus with dropdown, as you can see the submenus are not visible and goes out of the screen. You can try Navigation Collapased element instead.

Thanks

Hello,

On my screen, I’m using chrome, the drop down’s background is still all black, rather than appearing the same as your screen shot. Please assist.

Also, I’ve been repeatedly asking for help with the modal that is covering the logo and no one has addressed that. Please see this:

Finally, how do i change the mobile view’s element from navigation dropdown to navigation collasped?

The modal blocking the logo, how can I move that to the right of the nav menu, and then hide it on mobile?

Hi @marymmccauley,

Please add this to your global custom CSS,

.e11270-8 .sub-menu .x-anchor[class*="active"] .x-anchor-text-primary {
    color: #000 !important;
}
.e11270-8 .sub-menu .x-anchor[class*="active"] {
    background-color: #fff !important;
    color: #000 !important;
}

.e11270-8 .sub-menu .x-anchor[class*="active"]:hover .x-anchor-text-primary {
    color: #fff !important;
}
.e11270-8 .sub-menu .x-anchor[class*="active"]:hover {
    background-color: #000 !important;
    color: #fff !important;
}

About the modal covering the logo, you must delete the header where the modal icon is. There is no need for multiple header bars with same offsets. What you could do is add the modal icon the same place where you add your inline navigation OR on the right container. There is a sample I made named Sticky Bar X where each element is added to each container to prevent overlapping, instead of multiple header bars. And you’ll see that I only use one single header bar.

Thanks!

How can I remove the black bar over top of the menu links when hovered? And, how can I move the positioning of the submenus? They almost overlap the primary menu items.

And, this still needs to be solved, how do I change the mobile view’s element from navigation dropdown to navigation collapsed?

Hello @marymmccauley

Thanks for asking. :slight_smile:

  1. On hover I don’t see a black bar on top menu. Can you please confirm?
  2. Sub menu position: You can change the sub menu position from Navigation inline > Dropdown > First Dropdown margin. Here’s a screencast that you can take a look.
  3. To display Navigation Collapsed element on mobile devices, first will have to hide Navigation Inline element on mobile devices. Under Customize > Setup > Hide During Breakpoints and select mobile icons.

After that Add Navigation Collapsed element and under Customize > Setup > Hide During Breakpoint and select laptop and desktop icons so that the element displays only on mobile screens. To help you get started, I have recorded a screencast, please take a look. https://cloudup.com/cg62n_WXk0d

To learn more about Hide During Breakpoints, please take a look at following article.

Thanks.

Hello, on mobile, it’s still not displaying correctly. I set the button to display as a square, but it’s displaying as burger, I would like to it be a square. Also, the menu items are displaying incorrectly/are cut off.

Hello, on mobile, it’s still not displaying correctly. I set the button to display as a square, but it’s displaying as burger, I would like to it be a square. Also, the menu items are displaying incorrectly/are cut off.

I have somewhat figured it out, except on mobile there are now 2 navigation areas, I need help removing the one that isn’t set to “navigation collapsed” and I need help setting it from burger to square (white with black lines)

Hi Mary,

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

I also suggest that you first learn more about the header builder and get more information about the tips and tricks so that you will be able to handle most of the problems you encountered without the need to get to us. I suggest that you take time and watch the video below:

Having said that I will try to give you the pointers about the questions you had:

  1. Whenever you want to hide or show an element on different screen sizes you need to use the hide during the breakpoint feature. Read this article so that you will be able to hide the navigation you have mentioned on mobile:
  1. Whenever you want to remove the circle of the navigation toggle you need to make the Border Radius feature 0. So for your example:

Also, you need to set the Box shadow to 0 to remove the shadow. And finally in the setup section of the toggle options, you need to set the background color to transparent to avoid that white background:

In general, all your question is the matter of getting used to the options available for each element. We will be glad to help you learn more about each option as you add new threads for each question.

Thank you for your understanding.

I understand the hide breakpoint feature, and I understand opening a new thread for new questions, but I’ve been asking this question here, over and over for days. And I’ve been working on my header for several days. I also understand that if I was an expert at the header builder I wouldn’t have questions. But once again, on mobile I have 2 submenus and I can’t figure out how to remove the one that isn’t “nagivation collasped.” I need to move the navigation collapsed element all the way to the right. I can try to fix the rest myself, but I need help. I’ll gladly open a new thread, even though I’ve been asking for help here regarding this issues for 2-3 days.

Hello @marymmccauley,

I can understand the frustration but for additional questions it’s always advisable to create a new ticket to avoid confusion and slow response time. Please create a new ticket and you can give reference to this ticket.

Thanks for understanding.

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