Css issues with top bar and menu in footer

Support
#1

Hi There,
I have two issues I am trying to address with css, and I have been unable to solve them.
The first is how a menu is displaying in the footer. I do not want the border to show. Below is the css I am using.

div#nav_menu-15.widget.widget_nav_menu {
margin-top: 44px !important;
}
div#nav_menu-15.widget_nav_menu ul>li a {
background-color: transparent !important;
text-shadow: none !important;
border: none !important;
color: #100001 !important;
}
div#nav_menu-15.widget_nav_menu ul>li a:hover {
background-color: transparent !important;
text-shadow: none !important;
border: none !important;
color: #f3f4f4 !important;
}
ul#menu-footer-custom.menu {
width: 70% !important;
border: none !important;
box-sizing: none !important;
}

Second problem,
The topbar, and the button links I’ve place there are not resizing properly when viewed in portrait mode on a smart phone.

I’ve tried this css, and it doesn’t work
@media (max-width: 767px) {
.topbar-button-child {
margin-bottom 12px !important;
}
}

What am I missing with these two issues?
The website is: https://www.saintjamespreschool.com/

Thanks very much for your help!

Best Regards,
Nancy

#2

Hello Nancy,

Thanks for writing in!

  1. You can add following CSS to remove border on footer widgets:

footer.x-colophon.top .widget ul, .widget ol {box-shadow: none;}

  1. Can you please let us know how you want the button links to display on mobiles?

Thanks.

#3

Hey Prasant,
Thanks so much for the CSS. The footer menu looks great now!
For those links, below is the screenshot of the desktop view.

For Mobile, I’d like them to be stacked with a 2px margin if possible.
Below is what they currently look like. You can see that they are overlapping eachother.

So Parishioner login should be on the second line and Give now on a third line.

Thanks so much for your help!
Best,
nancy

#4

Hello Nancy,

Thanks for updating the thread. :slight_smile:

Please add following CSS to achieve desired output:

@media only screen and (max-width: 500px) {.x-topbar .p-info span.topbar-button {display: block !important; clear: both;}

.x-topbar .p-info span.topbar-button-child {display: block;}}

Let us know how it goes.

Thanks.

#5

Looks beautiful!!! Thanks so much Prasant. I really appreciate your help!

Best Regards,
Nancy

#6

Glad we could help.

Cheers!