0

Unfortunately it looks like you can't hide link text with CSS. On my WordPress site, at 375 px and below, the titles of the links in the secondary-navbar start to overlap.

enter image description here

Please see for yourself

What I'm trying to do is to say "as soon as the titles start to overlap (at 375px and below), make the titles disappear." I'd also like to make the glyphicons larger and centered.

Here's a link to my header.php file. I didn't write the code for this site and am not very familiar with the wp_nav_menu function, but I would guess that it's probably line 62 that's causing the menu titles to appear in the div with the nav navbar-nav secondary-links class.

So then, if that is the problem, how do we get that specific part of the function to disappear at 375px and below?

I tried commenting out line 62 and got a pretty bad result:

enter image description here

Please point me in the right direction if you have any suggestions / ideas. Maybe there's a way to disable the titles with JQuery? Thank you.

Community
  • 1
  • 1
HappyHands31
  • 4,001
  • 17
  • 59
  • 109

1 Answers1

3

Here is the solution put it in the end of the stylesheet file.

@media only screen and (max-width:480px) {
   .secondary-navbar .navbar-nav > li > a{font-size:0px;}
   .secondary-navbar .navbar-nav > li > a:hover{font-size:0px;}
   .secondary-navbar .navbar-nav > li > a span{font-size:20px!important;}
}
Abdullah Ramadan
  • 182
  • 5