NavBar not working on mobile devices


Topic: NavBar not working on mobile devices

dojo44 asked 5 years ago

NavBrand and NavLink should display on mobile device

Only Hamburger menu item displays

pleaes look at alphaintervaltraining.com on android phone

styles.scss /* You can add global styles to this file, and also import other style files */ .container-fluid { padding-right:0; padding-left:0; margin-right:auto; margin-left:auto } mdb-accordion-item { & .card { border-radius: 25px !important; } } mdb-accordion-item-head { & .card-header a { color: red !important; } } mdb-accordion-item-body { & .card-body { color: blue !important; font-weight: bold !important; } }

.nav-link, .md-form, .navbar-brand { color: yellow !important; font-weight: bold !important; mix-blend-mode: difference; }

navbar

--> --> Intro Classes Coaches Schedule Benefits Facilities Faq Culture Account Signup Book --> --> --> --> JOIN THE ALPHA COMMUNITY--> WE ARE A TEAM OF EVERYDAY--> --> --> WE ARE A TEAM OF EVERYDAY--> --> JOIN OUR SUMMER SPECIAL!--> --> !!! CLICK HERE !!!--> --> --> --> -->

JOIN THE ALPHA COMMUNITY

WE ARE A TEAM OF EVERYDAY EXTRAORDINARY PEOPLE WE ARE YOU


WE ARE A TEAM OF EVERYDAY EXTRAORDINARY PEOPLE WE ARE YOU

JOIN OUR SUMMER SPECIAL!


!!! CLICK HERE !!!

app component.html


Arkadiusz Idzikowski staff commented 5 years ago

What is the exact problem here? It's normal behavior for navbar to display hamburger menu on small screens.


dojo44 commented 5 years ago

Please view the site AlphaIntervalTraining.com when you click the hamburger menu the menu is not displayed. There also seems to be some sizing issues. When I shrink the page it allows me to shrink it past the boundaries of the image. I see a white border on the side. Tx


dojo44 commented 5 years ago

Hello. Has anyone looked into this. I have tried everything that I can think of, even just putting up a navbar, to no avail. Simply put the links do not appear when the hamburger is pressed. Any thoughts? What else do I need to provide?


Arkadiusz Idzikowski staff commented 5 years ago

We didn't see any problems with navbar on your website (tested on different browsers on android and ios). Please provide the device, browser type and browser version on which you tested that. You can also paste here the html and ts code that you use to render mdb-navbar.

As for the white space on the right and left side - you probably used Bootstrap grid incorrectly. If you use .container class you should add a div with .row class inside. Please take a look: https://mdbootstrap.com/docs/jquery/layout/grid-usage/


dojo44 commented 5 years ago

I adjusted the container usage. Looks better.

Chrome, Pixel3 XL Chrome 76.0.3809.132 OS Android 9 Pixel XL Build PQ3A.190801.002

This is the html for the navbar

Intro Classes Coaches Schedule Benefits Facilities Faq Culture Account Signup Book

JOIN THE ALPHA COMMUNITY

WE ARE A TEAM OF

EVERYDAY EXTRAORDINARY PEOPLE

WE ARE YOU

JOIN US!


!!! CLICK HERE !!!

scss .view { background: url("../../assets/img/spa/panoramicsmall.jpg")no-repeat center center; background-size: cover; height: 100vh; }

.navbar { background-color: transparent; }

.top-nav-collapse { background-color: #4285F4; }

@media only screen and (max-width: 768px) { .navbar { background-color: #4285F4; } } .nav-link, .md-form, .navbar-brand { mix-blend-mode: difference; }


Arkadiusz Idzikowski staff commented 5 years ago

The code you provided is unreadable and incomplete. Please edit your first post and use tools from our editor to format it correctly (you can paste the code, select it and use 'Code sample' button - Ctrl + K).

We will try to reproduce the problem on this specific device.


dojo44 commented 5 years ago

I sent the entire site to you in a zip file. Have you looked at it yet. I can confirm this works on Apple, but not Pixel 3 XL with current chrome. That is of course the phone that I have.


Arkadiusz Idzikowski staff commented 5 years ago

We didn't receive any message on official support account, what email address did you use? Could you send it again to a.idzikowski@mdbootstrap.com?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No
Tags