In general, you can use @media queries to write CSS that only applies when the browser window is a certain size:
@media screen and (max-width: 800px) {
... CSS goes here ...
}
The CSS in that block will only apply when the browser window is less than 800 pixels wide.
Thank Very Much! I’ll go try.
HI! I got it! Thank very Much!
Now, please. Why Can not apen submenus in my mobile when my scrollbar is much to down? for example on http://www.saborhonesto.com.br/menu Could you help me resolve this?
Gratefully!
@fabio-nunes-souza – do you mean you want the menu button to stay on the screen when you scroll on mobile devices?
If so, try taking your current CSS:
@media only screen and (max-width: 960px) {
.menu-toggle {
/* background-color: rgba(0,0,0,0.1); */
border: 1px solid rgba(255,255,255,0.2);
display: block;
font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 1em 1.5em;
position: absolute;
right: 0;
text-transform: uppercase;
top: -25px;
width: 100%!important;
}
}
Change position to fixed
Change top to 0px
That should put the menu at the top of the screen, and keep it there while you scroll down.
Let us know if that helps, or if you had something different in mind
Hi Chad. Thank for your response, but like image attachment on mobile 1, when I click on menu, the sub menu appear like on mobile 2. On mobile 3 when the scroll is down (near the footer), I click on menu and the submenu does not appear like on mobile 4. to appear I need scroll up. Exist only this way?
Ask 2: On Desktop, why the principal menu does not following together with the scroll, like this site http://www.condomanage.com.br?
Thank Very Much!
Thanks for those screenshots, that helps a lot!
After calling in a little backup, I have some CSS that should help with the menu – we did notice that it looks like you might be modifying the theme’s stylesheet directly though. If you are, it would be much better to use the Additional CSS panel in the Customizer (if you haven’t already upgraded to WordPress 4.7, now is a good time!)
Editing the theme directly is risky, because if the theme gets updated, all of your changes will be lost.
Try this for the mobile menu:
@media only screen and (max-width: 960px) {
.primary-menu {
background: #fff;
bottom: 0;
left: 0;
right: 0;
position: fixed;
overflow: hidden;
overflow-y: auto;
top: 40px;
}
#site-navigation ul li {
display: block;
/* not table */
}
#site-navigation ul a {
padding: 1em
}
#site-navigation ul.sub-menu {
background: #fff;
padding-left: 2em;
}
}
On Desktop, why the principal menu does not following together with the scroll, like this site http://www.condomanage.com.br?
It looks like you’ve set your menu to scroll along with the page, but it doesn’t currently have any background to it.
Give this a try in your CSS:
.site-header {
position: fixed;
}
Let me know how it goes!
Thank Very Much Chad! GREAT response about my first question! I got it!
About my secound question I thought that the principal menu goes along with the scroll bar in Dyad Theme default, or am I mistaken?
Gratefully
You’re welcome! I had some help on that one, so I can’t take all the credit š
By default, Dyad’s menu stays at the top (demo site here) instead of scrolling along with you.
Hi! Please, On https://aperitivedemo.wordpress.com/reservations/ I would like know if Is it possible Limit the number of reservations. Thank Very Much!
Hi Fabio – the reservations on that demo site use a Contact Form – the one being used on that site does not include a way to limit the number of submissions, but you may be able to find a plugin specifically designed for that purpose.
Try searching ww.wp.xz.cn/plugins for “reservations” or “restaurant reservations”
Also, it will be best if you open a new thread for new questions – that way this one stays focused on the topic in the title š
