Forums

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
    Posts
  • #204115
    crazyfool
    Participant

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

    #204143
    crazyfool
    Participant

    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

    #204162
    crazyfool
    Participant

    Thanks a lot for the help! That is perfect!

    #204164
    crazyfool
    Participant

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

    Thanks

    #204177
    Paulie_D
    Member

    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.

    #204178
    Paulie_D
    Member

    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.