Hi,
I have been working on a website and have been running into an issue I hope someone might have an easy answer to.
I have a logo, nav menu, 2 buttons, and a couple of icons, all of which take turns being hidden or not. However, although I can hide the element (display: none;) the wrapper remains present which is resulting in space being inserted although technically there is nothing there to be displayed (in this instance it is a link wrapper that is still present although I have hidden the icon with the link). Is there any way that this can be resolved? ie when you hide the element you don’t then have to try and figure out how to get rid of spacing for the hidden element?
Thank you in advance for your help
Hi Milan,
Welcome to the forum, and thanks so much for your report!
I moved your thread from the “Developer” category to “Bugs”, since it’s more of a bug report/how-to question
Would you be so kind as to provide a live link and a screencast using https://jam.dev showing and explaining what’s happening? Otherwise, it’s pretty hard to follow. Thanks!
Sorry timmse but I have already shuffled everything around in the header to fix it as I had to complete the work. I have attached an image from a screen shot before altering it. Essentially the icon element is hidden but due to the wrapper still being present the browser is inserting spacing for the element (the icon and 2 button are all in the one block together too if that helps). Hope this helps.
I have not actually solved the issue. More like a painful work around. I am currently recreating the header to see if I can get the issue to occur again so that I can record it with Jam. If possible, I would like this still looked into and as I said I will try to replicate the problem to send it through.
OK Timmse here is a link to the Jam video showing the issue that I was explaining. I hope this gives you everything you need and if not please let me know.
Hi Milan,
Thanks for the video and especially the link to the website!
Briefly summarized:
You insert an icon, set a link on the icon, and then set the display property to none. The result is that the icon is hidden, not the a-tag (the link) around it. Accordingly, the gap is still present, as the styles are still applied to the icon itself and not to the link, as in 99.9% of cases, you want to style the icon and not the link around it.
However, there is a straightforward and painless solution for this.
remove the link from the icon.
instead, wrap the icon with a div.
change the HTML tag of the div to a[link] and set your link
set the display property of the div/link to none
Result: no gap, because you apply the display:none value directly to the wrapper instead of the icon
