Mobile responsive sidebar menu

[thom]

Hey 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?

http://tidenssamling.dk/

thank you

http://tidenssamling.dk/

[Stefsull]

I'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.)
HTH

[thom]

Hey 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">

[thom]

sorry it is this code, Ihave been using:

<ul id="skip">

skip to sidebar

[thom]

`<ul id="skip">
<li><a href="#sidebar">skip to sidebar</a></li>
</ul>

[Stefsull]

Is 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.

[thom]

Hey 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

[Stefsull]

Your 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>

[thom]

Hey 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

[Stefsull]

Is 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?

[thom]

Hey 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?

[Stefsull]

Somehow, 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

[thom]

Hi 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

[thom]

Its 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

[Stefsull]

Glad 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?

[thom]

You 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

[Stefsull]

OK, 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

[Author]

Posts