Footer duplicated on mobile devices

Theme have one menu and you created one more menu as instructed in the tutorial, so on mobile showing 2 menus.
You have to write media query CSS to show the only one menu that you want.

To hide the desktop menu, write menu class display none as like below.

@media only screen and (max-width: 767px)
.menu {
display: none;
}

Thanks Nisha.

I think I may have been a bit confusing in my post.

I am having no issues with the theme’s original header menu. I added a footer menu, and on mobile devices, this footer menu is shown twice. I want it to only show once.

I inserted the code you gave me into my child css style file but it didn’t seem to change anything.

Regards
Neil

Hi,

I have written solution for footer menu, not for the header.
make @media only screen and (max-width: 767px)
.menu {
display: none !important;
}

‘display: none’ is not applying to footer menu. See this https://www.screencast.com/t/BKbwkXLDB but ‘!important’ must help you. So write ‘display: none !important;’ check this https://www.screencast.com/t/y0veVqCka

Hi Nisha

Thanks for this. I think I’ve implemented what you suggested, and it worked in removing the inline footer menu on mobile sites. However, it has also removed it from the desktop version of the website. There is now no footer menu at all on the desktop site.

This is what I have in my child css style file:

/*
Theme Name: Fruitful child
Theme URI: https://themes.fruitfulcode.com/fruitful
Author: fruitfulcode
Author URI: https://fruitfulcode.com
Description: Fruitful Child theme
Template: fruitful
Version: 1.0
Text Domain: fruitful
*/

@import url(‘../fruitful/style.css’);

element.style {
display: none !important;
}

@media only screen and (max-width: 767px)
.menu {
}

.bottomMenu { display: block; width:100%;}
.bottomMenu ul { display:none; float:right;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 12px; }
.bottomMenu li a {
color:#000;
line-height:15px;
text-decoration:none;
font-weight:normal;
border-right: thin solid #000;
padding: 0 7px 0 3px;
}
.bottomMenu li a:hover { color:#ccc; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;} /* remove pipe from last item */

Remove this
@import url(‘../fruitful/style.css’);
element.style {
display: none !important;
}

Only single line css (display: none !important;) add in below css

@media only screen and (max-width: 767px)
.menu {
}

.bottomMenu { display: block; width:100%;}
.bottomMenu ul { display:none; float:right;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 12px; }
.bottomMenu li a {
color:#000;
line-height:15px;
text-decoration:none;
font-weight:normal;
border-right: thin solid #000;
padding: 0 7px 0 3px;
display: none !important;
}

Thanks Nisha

I was able to get it! Thanks for your help. Final code below:

/*desktop footer menu */
@media only screen and (min-width: 900px) {
.bottomMenu { display: block; width:100%;}
.bottomMenu ul { display:inline; float:right;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 12px; }
.bottomMenu li a {
color:#000;
line-height:15px;
text-decoration:none;
font-weight:normal;
border-right: thin solid #000;
padding: 0 7px 0 3px;
}
.bottomMenu li a:hover { color:#ccc; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;} /* remove pipe from last item */
}

/*mobilefooter menu */
@media only screen and (max-width: 899px) {
.bottomMenu { display: block; width:100%;}
.bottomMenu ul { float:right;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 12px; }
.bottomMenu li a {
color:#000;
line-height:15px;
text-decoration:none;
font-weight:normal;
border-right: thin solid #000;
padding: 0 7px 0 3px;
}
.bottomMenu li a:hover { color:#ccc; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;} /* remove pipe from last item */
}

Cheer up! You fixed the mobile footer menu issue.