Off canvas weirdness in Pro header builder

Support
#1

Hey there, I’ve made a content area off-canvas for my main menu. On the home page, it’s working fine:

https://bwdcdev.co.uk

If I inspect the code on that page, the padding is as it should be: padding: 45px 0px 45px 0px

If you look at the same header on this page: https://bwdcdev.co.uk/adult-art-classes/ you will see that the menu content has been pushed out. Looking at the code, I see this setting for the padding:

padding: calc(3em * 2)

Where is that coming from?! It’s the same header and there is no custom CSS on that page. I’ve tried duplicating the header and putting it on another page and it’s the same. Help!

Thanks,
Shaun

#2

Hey @ShaunCoward

It looks like you’ve used custom CSS to remove the padding on the homepage:

image
image574×656 33.7 KB

The problem with using any .e selector in Pro is that those classes are dynamic and can change. You should always assign a custom class or ID and target that, or use the $el {} shorthand when customizing an element directly.

For your original question, the default padding comes from the setting for the modal’s close button, where you’ve typed 3em for the size. In order to prevent content overlap with the close icon, the content area uses that calculation with the font size to ensure there;s always ample room around it.

As you can see, that might not always be your desired effect, so overriding it with custom CSS is totally fine, I would recommend adding a custom ID to the modal and targeting it that way. Be sure to inspect the modal on the front end after adding your custom ID to see how those are treated in order to get the proper CSS selector to target.

#3

Thanks Michael, that’s great. Full disclosure: I started working on this site about six months ago and for various reasons it was canned - until now! So I’m trying to pick up where I left off, which isn’t easy!

Understand what you’re saying so all good. Still don’t know where that custom CSS is to remove the padding on the homepage though. Not in the custom CSS tab for the page or the theme options. Any ideas where it is?! (I realise I am basically asking you to tell me what I did six months ago because I can’t work it out for myself, haha!)

If you can tell me where it is, great. If not, no problem, I can work with your solution. Thanks!

#4

Hi @ShaunCoward,

Most likely you added that custom CSS on the Header > CSS

Footer > CSS area is also a possibility since all of that custom CSS will be combined on the front.

Also, a possibility that you added that custom CSS on the Element CSS area of the Content Area Off-Canvas Element without using the special $el selector.

As Michael said above, please avoid using those generated class (e.g. .e172-3) as a selector as those are dynamic and can change.

Also, make sure you clear all your caching plugin/feature.

If the issue persists, please provide us login credentials in a secure note so we can take a closer look.

Cheers!

#5

Ah yes - that was it! I’d put it in the Element CSS area of the Content Area Off-Canvas! Thanks, thought I was losing my mind! I’ll work with that, thanks again!

#6

We are delighted to assist you with this.

Cheers!

#7

I’ve created a test header for this page: https://bwdcdev.co.uk/about-us/

Created a custom ID for the element, which is menu-padding

Added the following CSS to the element:

#menu-padding {
padding: 0 !important;
}

But it doesn’t change anything. What am I missing?! Sorry, I know this is simple stuff and I am being a doofus.

Thanks,
Shaun

#8

Hi Shaun,

As Michael said above, be sure to inspect the modal on the front end after adding your custom ID to see how those are treated in order to get the proper CSS selector to target.

When adding classes or IDs to Elements, it is important to remember that often times one singular “element” is actually made up of multiple pieces (“partials”). Because of this, the input of a class or ID will occasionally show up on multiple partials. Additionally, in the case of IDs, these may be slightly modified as you can only have one unique ID on a page at a time

Please read more about that here.

Hope it helps,
Cheers!

#9

Thanks for your help, but I’m still not there.

I gave the Content Area Off-Canvas the ID: my-content-area

In the front end that displays as my-content-area-off-canvas

But what I need to target is actually inside that, so I added CSS:

#my-content-area-off-canvas .x-off-canvas .x-off-canvas-content {
padding: 0 !important;
}

Still nothing. I understand (I think) the article you linked but I’m obviously missing something.

Shaun

#10

Ah! Got it!

Thanks for your help!

(I needed to specify .x-off-canvas-content-left)

Thanks again!

#11

Glad to hear you got it sorted, Shaun.

#12

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