How to make the top nav content to be vertically align in mobile views?

Hi,
@Kasia Swiderska provided a tqeak about making the top nave repsonsive on mobile, while it s good, the view wasn't ok on blackberry. Hence , how can I make the topna content to be vertically align on mobile view as shown in this screen shot: http://awesomescreenshot.com/0865aez56d
mobile responsive test site used url: http://w3webtools.com/mobile-web-browser-emulator-blackberry/
url://http://www.kaisteventures.com

With Regards

  • Tyler Postle

    Hey Barni,

    Whats a BlackBerry? :p kidding. I use to be a big BlackBerry fanboy, it's a shame they fell so far behind.

    So do you want the hamburger menu to be in the center at the top? Or you want the full menu to be there, so no more compressed mobile menu?

    This might be difficult because it looks like you want to take it outside of the menu bar.

    Look forward to hearing back!

    All the best,
    Tyler

  • Barni

    Hi @Tyler Postle,
    Trust you are good today. Here is what I'm seeing in mobile test website in this shot: resource://jid0-gxjllfbcoax0lcltedfrekqdqpi-at-jetpack/as-ff/data/edit.html
    Link:http://mobiletest.me/iphone_5_emulator/?u=http://www.kaisteventures.com
    1. How can I make the content on the top nav to be responsive especially the phone number?
    2. How can I make the hamburger menu not to overlap on the logo or make the logo and hamburger menu not to clash as seen in the above shot and link.

    Regards

  • Tyler Postle

    Hey Barni,

    Apologies for my delay here. I just checked this on the emulator again and the menu looks to be vertical now as seen in my screenshot.

    Looks same as your iPhone 5 screenshot. That is what you want it to look like right? So the phone number drops below the email.

    This CSS should ensure that the hamburger menu doesn't overlap off the edge:

    .navbar-toggle {
      margin-right: 20px !important;
    }

    Usually we don't want to use !important; however, sometimes it can be a necessary evil to overwrite existing styles.

    I know you already have a custom stylesheet; however, in-case someone else sees this who doesn't, they can use this plugin: https://en-ca.wordpress.org/plugins/simple-custom-css/

    Look forward to hearing back!

    Cheers,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.