The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #204115

    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:

    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


    Hi senff,

    Thanks for the reply!

    Ive currently got this as my browser view and i want to go to 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:

    Thanks again


    Thanks a lot for the help! That is perfect!


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



    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.


    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design’ is closed to new topics and replies.