How to have a logo in a responsive navigation bar [like image in post]

Hey guys, I’ve just registered here as I didnt really know where else to look for help.

So my problem is, that i am trying to make a responsive navigation bar, which has a logo above it. The design I am trying to base it upon is:http://i.imgur.com/GxLVzL7.jpg

Now I know this is possible in wordpress, however I would like to do it in straight HTML, CSS and Javascript/Jquery if possible.

I don’t want the navigation bar when in phone view to turn into the hamburger either, as there is only going to be those 3 links on the right (So it will literally be just the logo and the 3 links showing). I dont really know where to sort of start about doing this. Could anyone sort of point me in the right direction?

Thanks a lot

 

I don't really understand what you're trying to achieve here. Elaborating a bit more won't do any harm.
The image you included doesn't show much either. What exactly is the issue here? It doesn't seem all that complicated, just juggling with floats, positioning and media queries should do the job just fine. What in the world would you even want to use javascript for?

Whatever it might be, it has jack squat to do with wordpress. That right there just makes your post even quirkier. It doesn't make any sense!

 

I am literally trying to make that design but I dont know how to start. And am hoping someone would be able to point me in the right direction. The main problem I am facing issues with is the logo and how to get that to be bigger than the rest of the header.
Ive also never used media queries, so i was literally hoping someone would be able to link me a few links on where to learn this and go ahead about doing this.

Thanks

 

That clears it up a little.
First of all, I see two immediate problems with that design, that illegible contrast between your default state menu and background colors, as well as some thick webfont (probably bloated as well). You'd want to fix that.

Also, you want your menu to be responsive but you don't even show how it's supposed to behave on small screens. Should the links be pushed down beneath the logo or rather collapse into each other through interaction with an immovable logo? You'd need to specify that.

 

Well literally on mobile screens id like the logo and the 3 menus to be practically side by side hence not wanting the hamburger. I dont want the links below the logo either, id just want the space between the logo and the links to be smaller for tablets and near enough touching when on mobile view.

What do you mean about the contrast between the default state menu and the background colours? I dont quite understand.

 

http://codepen.io/sitechop/pen/BNrayy

there you go, that should get your started. You have to absolutely position the logo so it can go outside of the bar bounds.

As far as toggling the menu i just toggle a class .hide on and off when you click menu. Check out the code.