I am having a problem with the sticky menu as the browser is resized. This is especially noticeable on tablets. Basically, there are 12 menu items. As the browser is made smaller, it snaps to a two row menu.
The menu is sticky, which is what we want. However, the 2nd row has a “clear” background and as the user scroll’s down the page its basically impossible to see anything on that row.
I’d like to make it to where the 2nd row has the same background as the top row. How can I accomplish this?
Hi,
This usually happens when you use many menu items or with long names. You can reduce their font size/ the padding from left and/or right to make them stay on one line and you can do this via custom css. To target the tablets screen view in landscape or portrait you can use this css snippets:
* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
add your css code here..
...this will affect just the tablets on portrait view..
}
/* responsive landscape tablet */
@media (min-width: 1019px) and (max-width: 1200px) {
add your css code here..
...this will affect just the tablets on landscape view..
}
You can also follow this tread to see how this was doe for a particular case: https://forum.tagdiv.com/topic/menu-resize-tablet/
Thanks
Actually, I’m okay with it being on two lines. What I want is for the “background” on line 1 to be carried down to line 2. For reference, the website in question is the419.com. You’ll see how the last few menu items (submit, fAQ, etc) that get bumped to line 2, as you scroll down, are transparent against the photos/text/etc.
Hi,
Please try this custom css in Theme Panel > Custom Css: http://screencast.com/t/l5s1Ukp99hOa
@media (min-width: 768px) and (max-width: 1200px) {
.affix {
height: 100px;
}
}
Thanks!
