devtrix pro asked 6 years ago

Hi, I did a direct copy of the sample from the 'Components" area & Material SideNav section and here are the issues : 1. The Desktop menu is vertical & not horizontal 2. The SideNav does not appear. 3. No errors in the Browser Developer Console 4. In Firefox, when decreasing the screen size, there is a break point between Large & Medium, where the 'Hamburger" menu is displayed alongside the Nav links. Note: I have tried with Jquery 3.1 & 2.2. Please advise asap! I am also sending a zip file via email /********************************************Html**************************************************/ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MDB Nav Test</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="./css/mdb.css"> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an outdated browser. Please upgrade your browser to improve your experience.</p> <![endif]--> <!--Navbar--> <nav class="navbar navbar-dark bg-primary"> <!--Collapse button--> <i class="fa fa-bars white-text"></i> <!--Content for large and medium screens--> <div class="navbar-desktop"> <!--Navbar Brand--> Navbar <!--Links--> <ul class="nav navbar-nav"> <li class="nav-item active"> Home <span class="sr-only">(current)</span> <li class="nav-item"> Features <li class="nav-item"> Pricing <li class="nav-item"> About <!--Search form--> <form class="form-inline float-right"> <input class="form-control" type="text" placeholder="Search"> </form> </div> <!-- Content for mobile devices--> <div class="navbar-mobile"> <ul class="side-nav" id="mobile-menu"> <li class="nav-item active"> Home <span class="sr-only">(current)</span> <li class="nav-item"> Features <li class="nav-item"> Pricing <li class="nav-item"> About </div> </nav> <!--/.Navbar--> <script src="./js/jquery-2.2.3.js"> </script> <script src="./js/mdb.js"> </script> </body> </html>

Marta Wierzbicka staff answered 6 years ago

Hi, you're welcome. Best, Marta

mshallop pro answered 6 years ago

Good morning, Marta -- Thank you for the fast response - you were absolutely correct - my code was a bit off from the original examples... I'd been through several iterations but a complete reset did the trick so, thank you! --mike

Marta Wierzbicka staff answered 6 years ago

Hi, your navbar code is different than this one in our documentation here: Please, first of all, send me your files with correct MDB code and describe in details your problem. You can send me your files here: with detailed description. Best, Marta

mshallop pro answered 6 years ago

Hi! Was there a solution for the issue of the navbar displaying vertically instead of horizontally? I'm a brand-new user and right out of the box I ran into this issue. My code matches the samples given but I cannot get the nav bar to display correctly using these libs. No resource load errors, no console errors. Just pretty vertical nav bars. Thanks!
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="">
    <!-- css file variables are referenced via self object -->
    <!--suppress HtmlUnknownTarget -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet" />
    <!--suppress HtmlUnknownTarget -->
    <link href="static/css/mdb.min.css" rel="stylesheet" />

    <nav class="navbar navbar-dark blue">
        <div class="container">
            <a class="navbar-brand" href="#">CodeBlog</a>
            <!-- links -->
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home Feed<span class="sr-only">(current)</span></a>
                <li class="nav-item">
                    <a class="nav-link" href="#">Discover</a>
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                <li class="nav-item">
                    <a class="nav-link" href="#">Settings</a>
            <div class="list-inline pull-right">
                <a id="logout-link" class="btn btn-raised btn-default waves-effect">Logout</a>&nbsp;&nbsp;

Kamil Paciepnik free answered 6 years ago

Hi devtrix, please send files to my e-mail address with a detailed description of the problem - Regards

Please insert min. 20 characters.


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


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes