Topic: NavBar not working on mobile devices

dojo44 free 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

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 free 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 free 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/

Please insert min. 15 characters.

dojo44 free 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; }

<p>I adjusted the container usage.  Looks better.  </p>

<p>Chrome, Pixel3 XL
Chrome 76.0.3809.132
OS Android 9 Pixel XL Build PQ3A.190801.002</p>

<p>This is the html for the navbar</p>

Intro
                
                
                    Classes
                
                
                    Coaches
                
                
                    Schedule
                
                
                    Benefits
                
                
                    Facilities
                
                
                    Faq
                
                
                    Culture
                
                
                    Account
                
                
                    Signup
                
                
                    Book
                
            
        
    
    
        
            
                
                    <h2>JOIN THE ALPHA COMMUNITY</h2>
                    <h2>WE ARE A TEAM OF</h2>
                    <h2>EVERYDAY EXTRAORDINARY PEOPLE</h2>
                    <h2>WE ARE YOU</h2>
                    <h2>JOIN US!</h2>
                    <br>
                    <h1>!!! CLICK HERE !!!</h1>

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

<p>.navbar {
  background-color: transparent;
}</p>

<p>.top-nav-collapse {
  background-color: #4285F4;
}</p>

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

Please insert min. 15 characters.

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 free 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?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Opened

Specification of the issue

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

dojo44

80Support score
14Questions 1Answers 0Snippets