Community Forums › Forums › Archived Forums › General Discussion › Mobile responsive sidebar menu
Tagged: sidebar menu mobile responsive
- This topic has 16 replies, 2 voices, and was last updated 11 years ago by
Stefsull.
-
AuthorPosts
-
February 14, 2014 at 9:01 am #90290
thom
MemberHey there
I am using Streamline Pro. I have placed my main menu in the sidebar using a sidebar menu plugin. My problem is that the sidebar menu is showing at the bottom of the screen on mobile devices. Does anyone have a code on how to make the sidebar menu appear before the header on mobile devices like my topmenu? (I have used the primary menu as a top menu to make it mobile responsive - but the topmenu is only for practical information) Coult it be a solution to move the primary nav to the sidebar to get the menu to appear at the top on mobile screens?
thank you
http://tidenssamling.dk/February 14, 2014 at 1:53 pm #90334Stefsull
MemberI'm assuming you ONLY want the side menu, not the entire sidebar, to show up above the content for mobile?
With the current code, that's not possible since the sidebar menu is inside the <aside, and that comes after the main content area in the DOM. When the <aside is no longer floated, the entire thing will drop below the content (as you've seen).
I don't know your theme, but it appears that if you use the theme's hooks to move the secondary menu to come RIGHT after the opening of the <div class="content-sidebar-wrap" (and right before the <main class="content"), you can write CSS for it to make it the same width as your sidebar (320px) and float: left.
(There will be a few other CSS tweaks you'll need to do, but that seems to give the functionality you want.)
HTHFebruary 19, 2014 at 6:30 am #91114thom
MemberHey Stefsull
Thank you for your answer and sorry for my late reply - You are right it s only the sidebar. I will try to look into it - But now I have other plan. - I want to make a link in my menubar above the header.
I have tried to use the code below, but it is not working
<ul id="skip">
- skip to sidebar
February 19, 2014 at 6:32 am #91115thom
MemberFebruary 19, 2014 at 6:33 am #91116thom
Member`<ul id="skip">
<li><a href="#sidebar">skip to sidebar</a></li>
</ul>February 19, 2014 at 9:07 am #91139Stefsull
MemberIs the problem that you can't get the skip link INTO your theme? Or that once you get it in there, it doesn't actually skip down the page?
The anchor is instructing the link to go to a div with the ID of #sidebar. I don't see that on your page. So even when you create the link in your page, it doesn't know where to go and will probably resolve to the top of the page.
I don't know your theme, so I can't help you with what hooks put that in where you want it (do they have a reference chart?), but remember that in the media queries for larger screens, you'll want to use a CSS rule to hide the "skip to" link so it only shows to the smaller screens.
February 19, 2014 at 9:45 am #91150thom
MemberHey again
I can get the skip link into my page, but it does not skip down the page. I will try to find the ID for my sidebar, and see if that solves my problem.
Thank you for your answer.
/Thomas
February 19, 2014 at 9:59 am #91153Stefsull
MemberYour menu itself has this id: #menu-dansk-hovedmenu ... I'd try using that to start:
<ul id=”skip”> <li><a href=”#menu-dansk-hovedmenu”>skip to sidebar</a></li> </ul>
February 19, 2014 at 11:01 am #91181thom
MemberHey Stefsul
Thank you for your help. I tried to use the code, but the link does not work. I come to the 404 page.
Do you how I get the link to appear in the top-bar menu above the header?
I tried to use the hook - before header, because I used it to get the other menu above header, but the hook adds the link outside the header.Kind regards Thomas
February 19, 2014 at 11:06 am #91182Stefsull
MemberIs there anywhere I can see this online in the page (to see why it's going to the 404)? It doesn't appear to be in the link above...
I don't know Streamline Pro, so I can't really say why the hook isn't working. Can you paste the hook that works and the hook that doesn't into the forum? And maybe we can spot the problem?
February 19, 2014 at 11:16 am #91186thom
MemberHey again and thank you
I removed the link, because it did not work, but I have added it again, so you can see it. Maybe it is because I am using simple hooks? I know it is the reason why the link is showing outside the header - Is it better if I add codes to my function.php and my Stylesheet?
February 19, 2014 at 11:24 am #91187Stefsull
MemberSomehow, the link has double quotation marks. Here's the code: http://screencast.com/t/tObESO6n9i
And here's where it's trying to send the person: http://screencast.com/t/ylWiucHdXe
As to the hooks - are you entering the code for the menu AND the skip link in the same box? Like this: http://screencast.com/t/EgkqUp7DHu
February 19, 2014 at 11:47 am #91195thom
MemberHi again
And thank you for showing me the problem.
Yes all the code is inside the box
I have been trying to find, where I remove the double quotation marks, but I cannot find it.
And then I want the link to be in the top menu if its possible - instead of using the before header hook, because I don't want the link to be outside the header.
Thank you for your answers so far.
/Thomas
February 19, 2014 at 12:03 pm #91224thom
MemberIts working now:-)
Thanks for your help Stefsull. I just had to remove the qoutationmarks in the hook
Do you now how to move the link to the menu above the header?
/Thomas
February 19, 2014 at 12:09 pm #91228Stefsull
MemberGlad it's working... I'm guessing you want it to actually be PART of the menu above the header
<nav class="nav-primary"
?If so, I believe you have to do that in the menu widget.
Can you paste in here what you've got in the Simple Hooks settings box for the skip link & menu?
February 19, 2014 at 12:22 pm #91240thom
MemberYou are right
I want it to be a part of the menu above header, and thank you I will try to see, if its working tomorrow. Its late here now:-)/Thomas
February 19, 2014 at 12:32 pm #91241Stefsull
MemberOK, then I think you'll be good to just put it in like the rest of your menu. Mine looks like this (in Genesis): http://screencast.com/t/NXa0wjKPpJ
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.