Is it possible to add a link within the mobile menu that doesn’t appear on the desktop version of the main menu? Basically, we want to add a “sign up for newsletter’ link on the mobile menu, but we don’t want that in the main navigation on the desktop version.
Lastly, is there a way to view the desktop version from a mobile device?
Thanks.
Hi sejpost,
Yes, it is possible. First of all you must create a custom link within wordpress like this-> appearance->menu->custom link: http://screencast.com/t/cwbTeaDq and in next step please try a bit of css below:
@media (min-width: 768px){
.menu-item-57 {
display: none;
}
}
Attention: Every custom link newly created has a different id and you must target this in CSS for a result. This id you can find like this: http://screencast.com/t/Nz1kracbMa7a
The result: http://screencast.com/t/812JzGp9473 http://screencast.com/t/V6fAus84ivvx
For your second request, our theme has not been designed to display view of the desktop version in mobile version.
If is not what do you want, please provide more details.
Hope this helps.
Thanks.
Where do I go to add the CSS? Is this an editor file within my WP dashboard? If so, do I just put this code anywhere in a certain CSS file?
The CSS file in the parent or child theme?
@media (min-width: 768px){
.menu-item-57 {
display: none;
}
}
—-
I found this in my parent theme CSS:
}
@media (min-width: 1019px) and (max-width: 1140px) {
.td-block-row [class*=”td-block-span”] {
padding-right: 20px;
padding-left: 20px;
}
}
@media (min-width: 768px) and (max-width: 1018px) {
.td-block-row [class*=”td-block-span”] {
padding-right: 14px;
padding-left: 14px;
}
}
@media (max-width: 767px) {
.td-block-row [class*=”td-block-span”] {
padding-right: 0;
padding-left: 0;
}
}
.td-block-span4 {
/* 1/3 – used when the block is on td-3-col */
width: 33.33333333%;
}
.td-block-span6 {
/* half – used when the block is on td-2-col */
width: 50%;
}
/* responsive landscape tablet */
@media (min-width: 1019px) and (max-width: 1140px) {
Hello sejpost,
You must put the code within Theme panel->Custom CSS area like that: http://screencast.com/t/asPnUiCt7
Thanks.
I added it to the Custom CSS for to remove the last link (Advertise) from the desktop nav bar using this code:
@media (min-width: 768px){
.menu-item-42507 {
display: none;
}
}
It still shows up on the desktop site, but I only want it to show up on the mobile menu. Any help?
Site is http://www.eCoronado.com
Hi sejpost,
I’ve checked your site with this customization and works. Here http://screencast.com/t/rT7HmevGxX you can see the result http://screencast.com/t/Vn0bEdkpJ0rL . Please try to use the code below with !important because maybe you have another customization and can appear more conflicts.
@media (min-width: 768px){
.menu-item-42507 {
display: none!important;
}
}
Thanks.
It works now. I was missing a } on a piece of css code above it. Thx!
What happens if we have more than one menu item to hide on desktop and show on mobile? Is it a separate chunk of css code for each one or can the hidden menu items be listed in a single line of code? Please show me an example of the css code for hiding two menu items so that they only appear on mobile.
Thanks!
Hi sejpost,
Please follow the same steps as before. You should create another custom link, and put his ID in code, like this:
@media (min-width: 768px){
.menu-item-42507
.menu-item-X {
display: none!important;
}
}
Were X is the new ID items you want to hide it.
Hope this helps!
Thanks!
