Topic: My nav doesnt work in movile devices
Hello everyone!
Im just finishing my first MDB page but I found an error in nav that I cant find solution. In computer the page run completely OK but when I run the page in movile devices the responsive nav doesnt work correctely. The toogler button doesnt create his space for the menu, and goes away from his div.
Note: The body is in position: relative; because I´m using scrollspy in the page.
This is the code for my nav:
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark" role="navigation">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" class="logo img-fluid wow fadeInLeft" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-3" aria-controls="navbarSupportedContent-3" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Mostrar Navegación</span>
<span class="navbar-toggler-icon"></span>
</button>
I think the error is in this part of the code. I tried to put the container div in position: absolute, but still get over of his next section:
http://subirimagen.me/uploads/20190207115820.jpg
You also can see the page in: http://www.atmngo.com/joyeriaricardo/
I appreciate all kinds of solutions and suggestions.
Thanks, Álvaro
Hi,
this line in your CSS makes the problem: nav{ width: 100%; height: 15vh; }. Please, remove this: height: 15vh; and if you want to have higher navbar than a default one, add this code to your CSS: .navbar{ padding: 3rem 1rem; }. Of course, you can change these padding values.
Best, Marta
Hi,
I see you have a lot of custom styles on your page and I copy your navbar to the snippet here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/351226 without any custom styles, just exactly the same HTML code and it collapses correctly on mobile devices.
Please, look at your custom code if it doesn't broke your navbar or try to reproduce your problem in the snippet: https://mdbootstrap.com/snippets/ and you will see if it is something from MDB or from your custom styles.
Best, Marta
So, I post my nav in this snippet: https://mdbootstrap.com/snippets/jquery/onlyvilas/351939 with my custom styles but only modifying the MDB classes.
The error is that the menu in mobile devices is transparent and in the MDB class .navbar I specified with background: black;
So I dont know where is the problem
So strange... I posted again here: https://mdbootstrap.com/snippets/jquery/onlyvilas/359125 The responsive menu doesnt create space and is transparent, and I didnt found the class what make that
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: Movile devices
- Browser: Google Chrome / Safari / Firefox
- OS: Windows 10 Home
- Provided sample code: No
- Provided link: Yes