Overlapping tool tips on Header Bar on phones or small browser windows.

StackIdeas

By Jeff Suddaby on Wednesday, 03 September 2014

Posted in General Issues

Likes 0

Votes 0

Hi,

See attached screen shot.

At http://whazzat.org/wonder-rooms.html I'm using the Easy Blog header bar, with the text display option selected.

It works fine in a normal size browser window. However, on phones or in smaller browser windows the tool tips overlap the text links displayed on the menu.

How do I fix this?

TIA - Jeff.

Hello jeff,

Sorry for late reply to this,
In my opinion, that title is not necessary to exist, you can try add this CSS and see how it goes?



@media (max-width:768px)

{

	#ezblog-menu .blog-navi li.toolbar-item > a span {

		display : none;

	}



	#ezblog-menu.narrow .blog-navi li .tips {

		left: 10px !important;

	}



}

Arlex Wong

Friday, 05 September 2014 02:20

0 Likes

0 Votes

0 Comments

#164400

hello Jeff,

Sorry for late reply to this
Can you try apply this CSS code in your template css file and see how it goes?



@media (max-width:768px)

{

  #ezblog-menu .blog-navi li.toolbar-item > a {

      line-height: 14px !important;

  }

  

  #ezblog-menu.narrow .blog-navi li.toolbar-item > a {

      margin-top: -4px !important;

  }

}

Arlex Wong

Thursday, 04 September 2014 00:52

0 Likes

0 Votes

0 Comments

#164239

Thanks Arlex. MUCH better!

Is it also possible to increase the spacing a bit, in the 4 places indicated in the attached screen shot?

TIA - Jeff.

Jeff Suddaby

Thursday, 04 September 2014 20:28

0 Likes

0 Votes

0 Comments