Navigation Layered Issues

Support
#1

Hi,

I’m working with a header using the Navigation Layered feature. I’m attaching two screenshots…one shows how I would like the menu to look and the other is how it actually looks. It’s weird to me that the toggle doesn’t show through on the menu…I can see it underneath with the “X” on it, but there is another X on top of the overlay. Is there anyway to make this look correct?

I also would like to right justify my menu. However, when I use the “right justify” button in the text options, nothing happens. I’ve tried various CSS fixes, but nothing seems to work. Ideas?

Here’s how I would like it to look:

And here is how it actually looks:

Thanks for any help you can give.

#2

Hey There,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

#3

Hi! I just posted the secure note. Thanks!!

#4

Hello There,

Thanks for providing the information.

1.) To change the off canvas close toggle icon, please add this code in the custom css section of the header.

.x-anchor.x-anchor-toggle.toggle-link.x-active {
    display: none;
}

.x-off-canvas .x-off-canvas-close {
    
    background-color: rgba(255,255,255,1);
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25);
    width: 2.75em;
    height: 2.75em;
    border-radius: 100em;
    font-size: 1em;

    top: 25px;
    right: 25px;
}

.x-off-canvas-close span {
    color: black;
}

2.) And to change the width and align it to the right, simply tweak your element settings.

And you should have something like this in the secure note.

#5

Thank you. The toggle icon switch worked great!

However, I’d like to adjust padding around the navigation text block but am not able to find the right class to target in CSS. And I want the navigation text to be right justified, and again, not able to get it to do that. I did choose right justify from the adjustments menu but it doesn’t seem to work.

Thanks again for your help,
Jen

#6

Hello Jen,

Please reduce the close size because this is the basis of the margin around the off canvas area.

And you can apply margin and padding to the menu items;


Hope this helps.

#7

Hi again,

I have applied margin and padding to the menu items. That only works for in between each link. I’d like to move the whole block with all the links down so it isn’t so close the toggle (and it’s too close no matter if toggle is smaller). And I want to right justify. Do you know which class I should target in CSS to make this happen?

Thanks,
Jen

#8

Update: I found the target for the top margin I was looking for. However, still can’t get menu to right justify.

Thanks!
Jen

#9

Hi Jen,

You can try this.

Hope this helps

#10

Hi,

Adjusting the Right Text Margin appears to work within the preview. But when I look at the live page the text is still left justified. Any other suggestions? I’d love to just target it in CSS if I could find the right class to target.

Thanks,
Jen

#11

Hi Jen,

You will need to edit your header, and open the custom CSS panel and delete this line, it’s the one causing this issue:

Thanks.

#12

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