[jmb500]

Hi. I guess theres some media query hiding the footer menu at screen sizes below a certain size. So I tried using a widget footer menu instead which remains visible regardless of screen size. However it displays vertically rather than horizontally.

What is best way round this? I’ve already styled the footer menu as i want ti so i guess finding and removing the media query, but is there a good reason its there?

What I would also like to try the look of is for the footer menu links to appear in the site description footer – is there a way to do this?

http://mediamarble.com/equity/

[jmb500]

ok i found the media query in responsive.css so ive removed that in child theme and im happy with that

[jmb500]

i spoke a bit soo n there, it worked adjusting in firebug but im not familiar with enqueing scripts to get a child copy of responsive.css working. can you instruct?

[jmb500]

actually from what ive read i dont need to do that but can just add to my child style.css but im unsure what? I tried

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

	#footer-menu .menu {
		display: inherit;
	}

But it breaks the site’s other styles… im imagining this is something simple to solve to stop the media query from changing the menu to display:none but im not sure how…

[Sakin]

@jmb500: I see that you are using Catch Kathmandu Pro theme. So, you don’t need to add any custom css to make your footer menu visible in mobile devices. You can just go to “Appearance => Theme Options => Responsive Design” and then click on ”
Enable Secondary & Footer Menu in Mobile Devices” and save changes.

[jmb500]

Thanks Sakin didnt realise that was built in. However how can I get it to just display the footer menu as normal rather than the mini menu dropdown?

[Sakin]

@jmb500: If that is the case then you need to disable back the footer menu from mobile “Appearance => Theme Options => Responsive Design” and then add the following css in “Appearance => Theme Options => Custom CSS” box.

@media screen and (max-width: 767px) {
	#footer-menu .menu { display: block; }
}

[jmb500]

Great perfect thank you! btw any reason it wouldnt work in style.css and only in custom css? i just tried and it had no effect when placed only in style.css

[Sakin]

@jmb500: First, you are not supposed to edit any core theme files as when you update the theme, our edits will be overwritten. So, either you need to add those css in Custom CSS box or build child theme and add in child theme style.css

[jmb500]

Hi Sakin yes indeed I know that, i meant the style.css in my child theme already created; it had no effect when I add the code into it..

[Sakin]

@jmb500: Oh this one is from responsive.css which loads after that is why your child theme style.css is not overwriting it. If you want to add in your child theme style.css then the css will be as below:

@media screen and (max-width: 767px) {
	#colophon #footer-menu .menu { display: block; }
}

[jmb500]

Ok all sorted thanks again Sakin 🙂

[Author]

Posts