Topic: NavBar not working on mobile devices
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- 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
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
.containerclass you should add adivwith.rowclass 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 BookJOIN 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?