Side menu appearing at the bottom in responsive views
-
Hi.
On a few of my pages I have a side menu built using the text widget that acts as an anchored listing so that when you click on one of its items, it will take you directly to where that article is on the page. This works brilliantly for desktop but for mobile and anything under 768px it appears right at the very bottom of the article, which kind of defeats the purpose of having it. I understand that the side menu sits in its own separate div next to the content so naturally will sit underneath but is there any way that this can be rectified to show at the top of the content rather than at the bottom?The page in question is here:
https://grayshottheritage.com/features/churches/
Thanks!
The blog I need help with is: (visible only to logged in users)
-
We can do this with CSS, but the code that would be used would move the entire widget area to the top, including the search. The thing that has to be considered is that this code is only supported on modern browsers, and in the case of Internet Explorer, only version 11 or later supports it. Anyone on IE10 or older would see everything as it is. This typically would not be an issue for tablets and phones, but some may have their computer browser windows set narrower than 950px, and if they were on an unsupported browser, the menu and search would still be at the bottom.
Let me know your thoughts and if you wish, we can proceed.
-
Hi thesacredpath. Thanks for this, but I think I shall just have to leave it. I have spoken to my client and the majority of people would be viewing this on older versions of IE so this wouldn’t be practical. For the forseeable future I will place a message saying this page is best viewed landscape to enable people to see the menu for tablet at least.
-
Yeah, given the audience is on older versions of IE, I think that is wise. I wish IE was quicker in supporting all the great things in CSS3, but…
Let me know if you have additional questions or problems.
-
- The topic ‘Side menu appearing at the bottom in responsive views’ is closed to new replies.