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

[crazyfool]

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
:)

[crazyfool]

Hi senff,

Thanks for the reply!

Ive currently got this http://i.imgur.com/sf8AJR3.jpg as my browser view and i want to go to http://i.imgur.com/HPBsUk7.jpg when it goes to mobile view.

Is there anyway to make margins or padding shrink to make the site responsive for mobile view, and also how would i hide the name and university graduate bit when it goes to mobile view? The current codepen: http://codepen.io/anon/pen/vOWRag

Thanks again

[crazyfool]

Thanks a lot for the help! That is perfect!

[crazyfool]

Sneff, Is there anyway to make the paddings/margins to gradually decrease in size rather than jumping down in large amounts?

Thanks

[Paulie_D]

Senff, I’m not fully online right now as I am restricted to a mobile device but could something be done with viewport units in this respect?

Obviously though media queries will have to kick in at some point.

Or flexbox.

[Paulie_D]

Crazy fool, it’s worth remembering that the vast majority of users don’t resize their browsers. That’s something developers do.

Most users will open your page at a set size and never change it. As long as it looks OK when they open the page you should be fine.

They won’t see those jumps you mentioned.

[Author]

Posts