Menu overlap / transparency issue

Posted in: Newspaper
Post count: 79
meremetia
#16692
Jul 27, 2014 at 4:44 pm

Hello,

I am facing the following issue:

When views on iPad, my menu cannot be fitted on one line and some of the options are placed in a second line. When there is an expandable menu on the first line, it overlaps with content on the second (please see screenshot to understand).

So I am wondering if:

1) It is possible instead of going to a second line, to make it in a way that font size shrinks and it always fits on one line

2) make the menu opaque so there is no more of this overlapping issue

3) make the menu go into the collapsed mode earlier or make some items disappear to avoid this issue

thanks

overlapping / transparency issue:

Post count: 854
Radu A
#16744
Jul 28, 2014 at 2:50 pm

hi,
use this css: 

.menu-header-container ul.sf-menu >  li > a   {
  font-size: 10px;
}

here : http://screencast.com/t/5XPlGzkzmg

to decrees the size of the menu.

Thanks for you message.
Radu A.

Post count: 79
meremetia
#16747
Jul 28, 2014 at 3:13 pm

hi Radu,
I don’t think that work…

also maybe you could help me with making it opaque, so even if there is overlap, letters can still be seen?

thanks

Post count: 6600
Lucian
#16826
Jul 29, 2014 at 9:51 am

Hi,

Please use this css to hide the menu items behind the drop-down menu:

@media (max-width: 1018px) and (min-width: 768px) {
.sf-menu > li > a {
z-index: 0;
}
}

Or this if you want to use smaller font:

@media (max-width: 1018px) and (min-width: 768px) {
.sf-menu > li > a {
font-size: 10px !important;
}
}

Hope this works!
Thanks

Post count: 79
meremetia
#16933
Jul 30, 2014 at 7:45 am

thanks a lot

Viewing 5 posts - 1 through 5 (of 5 total)
You must be logged in to reply to this topic.