Hello,
I imported a header template (Estates PRO) and installed it as my top menu, after modifying it a bit. I have also installed a sticky menu from the same template. They save fine, but when they display, there is an extra space at the bottom of both menus (the regular and the sticky one). What is causing this extra padding at the bottom?
None of the CSS rows, columns or elements have any padding or any borders or margins in both menus. All elements seem to be properly set, with no extra spaces from the original template. Yet the problem persists on most computers and on the mobile. Can you help?
The website is:
onlineleadershipnetwork.com
Gregory
I have made some screenshots to demonstrate what I mean. These are screenshots of the sticky menu, although both the sticky and non-sticky ones have the same problem. Example 1 demonstrates what it looks like in Word Press build mode, where you will see no extra padding at the bottom of the header. That’s the way I want the header to appear. Example 2, however, shows what the page looks like when published. Note the extra space at the bottom of the header.
Again, no padding, margins or any CSS features have been set.
Hi,
Indeed this is about a margin bottom of 48px, the faster way to solve it is to use this custom css
.td_block_wrap {
margin-bottom: 0;
}
this code need to be set in the theme panel> custom code> custom css.
The second solution is to find out from where it is coming this custom code https://i.imgur.com/Wx3BLBG.png and set it on 0.
To save some time I recommend the first solution.
I hope this will help you!
Thank you!
Thanks. Would you recommend I make a child theme to add this change? Especially the second one? Will subsequent Newspaper 11 updates erase this margin-bottom set to 0 and reset it to 48?
Hi,
If you set the code in the theme panel, then will no longer be need a child theme, because the theme panel settings are saved in database and is not affected by the theme update.
Thank you!
Thanks for your answer. I really appreciate it.
Another followup question, though. If I add the code to the Custom CSS in the Theme Panel, will this only change the padding for the headers? Or will this apply to every element?
While designing my page with tagDiv for the first time, I noticed that some of your elements have a bottom padding built in. Therefore, when I used those elements, I simply compensated for this padding with CSS of my own on each element separately. For instance, I would set padding at the bottom to -40, or something like that. From the code you gave me above, I don’t see anything specific to the header. So, will this just fix the header extra padding, or will this apply to all the tagDiv elements that have a padding built in?
In addition to the above question…
I have added the custom code to the website by using the first solution you provided. However, there is no change in the behavior of the header.
Hi,
The code was for entire website where was injected that code. If you want to be only for the header, then you can try it like this -> https://i.imgur.com/VzscXz5.png
.td-header-template-wrap .td_block_wrap {
margin-bottom: 0;
}
Like you said, there are elements that by default have set a margin or padding and all elements have in tagDiv Composer a css tab from where can be adjusted. For example this https://i.imgur.com/OFEZBRz.png is a margin -> https://i.imgur.com/CsOlY71.png
I hope this will help you!
Hello,
I added the code you gave me in your latest reply, but that didn’t fix the extra spaces in the headers (both the sticky and non sticky ones). It seems to have made no difference.
Hi Greg45, can you please provide access to website to see when when you apply the css is no longer apply like on live css? If yes, then please contact us via email at contact@tagdiv.com and provide wp-admin access, I will check it as soon as possible.
Thank you!
Certainly! Sending the email now.
