0

Okay so I am trying to build a header that I like. I have been using bootstraps header and using my own CSS file to alter parts.

I have increased the size of the header, the colour etc. I have an icon on the left, nav buttons in the middle and social icons on the right. The social icons on the right keep getting in the way when the site is resized so I used the hidden tag to remove them at a certain media size, but even though you can't see them you the site still acts like they are there. Is there a way to solve this?

bchards
  • 294
  • 1
  • 5
  • 23

3 Answers3

1

Here's the thing.

display: none removes the element from the document flow.

visibility: hidden does not remove the element from the document flow.

So, whenever you're trying to hide an element without some weird document flow happening, use display: none;

Nick Snick
  • 911
  • 1
  • 9
  • 16
0

Try using display:none instead of visibility:hidden.

Trevor
  • 1,111
  • 2
  • 18
  • 30
0

Instead of visibility:hidden use display:none in the css. On display:none, the site will not act like the tag is there.

Matthew S.
  • 321
  • 1
  • 9
  • 22