- This topic has 11 replies, 2 voices, and was last updated 10 years, 1 month ago by jmb500.
-
AuthorPosts
-
March 29, 2014 at 5:05 am #23198jmb500Member
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?
March 29, 2014 at 5:13 am #23200jmb500Memberok i found the media query in responsive.css so ive removed that in child theme and im happy with that
March 29, 2014 at 5:29 am #23206jmb500Memberi 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?
March 29, 2014 at 5:55 am #23209jmb500Memberactually 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…
March 29, 2014 at 11:56 pm #23381SakinKeymaster@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.March 31, 2014 at 7:17 pm #23678jmb500MemberThanks 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?
March 31, 2014 at 7:34 pm #23679SakinKeymaster@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; } }
March 31, 2014 at 7:44 pm #23683jmb500MemberGreat 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
March 31, 2014 at 8:29 pm #23687SakinKeymaster@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
March 31, 2014 at 8:34 pm #23688jmb500MemberHi 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..
March 31, 2014 at 9:01 pm #23692SakinKeymaster@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; } }
March 31, 2014 at 10:18 pm #23701jmb500MemberOk all sorted thanks again Sakin 🙂
-
AuthorPosts
- The topic ‘Footer menu not displaying at smaller browser size / mobile devices’ is closed to new replies.