Skip to main content
C
Cheddaa
Known Participant
November 29, 2016
Question

Help with custom responsive nav bar!

  • November 29, 2016
  • 2 replies
  • 376 views

Hello everybody,

In the picture below i have a navbar for a regular non responsive website, and i need to figure out how to make something similar to this in a responsive setting.  I would like the red bar to run 100% width.  Any tips or help would help me.

    This topic has been closed for replies.

    2 replies

    O
    osgood_
    Legend
    November 29, 2016

    That would be easy on mobile but as goofy as a goose on desktop because you simply have nowhere for the nav tabs to go as soon as the brower window starts to narrow you would have to go to mobile format.

    This kind of menu where the logo is centered between the navigation tabs ls not practical now we are in the mobile age.

    It doesnt look nice  as you have different spacing between the tabs on account you have a 4/3 split.

    Unless your client has specifically requested the layout you would be better advised to keep the logo and the tabs seperate.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 29, 2016

    I'm in agreement with osgood about the centered logo.  It's way to problematic to work right in all devices.

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 29, 2016

    You need stacked vertical navigation to fit on mobile devices. 

    What you have now won't work below a certain pixel width.

    My advice is to look at some responsive web sites in a mobile device and see which types of responsive menus work best.  Then you can set about duplicating the one you like.

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices