Navbar / Sidenav problem

Topic: Navbar / Sidenav problem

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="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="./css/mdb.css"> </head> <body>   <nav class="navbar navbar-dark bg-primary">  <i class="fa fa-bars white-text"></i>  <div class="navbar-desktop">  Navbar  <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  <form class="form-inline float-right"> <input class="form-control" type="text" placeholder="Search"> </form> </div>  <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>  <script src="./js/jquery-2.2.3.js"> </script> <script src="./js/mdb.js"> </script> </body> </html>

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, you're welcome. Best, Marta

Add comment

mshallop pro answered 6 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, your navbar code is different than this one in our documentation here: https://mdbootstrap.com/components/navbar/. 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: m.szymanska@mdbootstrap.com with detailed description. Best, Marta

Add comment

mshallop pro answered 6 years ago

0 0 Best answer

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!

<pre><code><html lang="en">
<head>
    <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">
    <title>CodeBlog</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    
    
    <link href="static/css/bootstrap.min.css" rel="stylesheet" />
    
    
    <link href="static/css/mdb.min.css" rel="stylesheet" />
    
</head>

<body>
    <nav class="navbar navbar-dark blue">
        <div class="container">
            <a class="navbar-brand" href="#">CodeBlog</a>
            
            <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>
                <li class="nav-item">
                    <a class="nav-link" href="#">Discover</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Settings</a>
                </li>
            </ul>
            <div class="list-inline pull-right">
                <a id="logout-link" class="btn btn-raised btn-default waves-effect">Logout</a>&nbsp;&nbsp;
            </div>
        </div>
    </nav></code></pre>

Please insert min. 20 characters.

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">
<head>
    <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">
    <title>CodeBlog</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <!-- 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" />
    
</head>

<body>
    <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>
                <li class="nav-item">
                    <a class="nav-link" href="#">Discover</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Settings</a>
                </li>
            </ul>
            <div class="list-inline pull-right">
                <a id="logout-link" class="btn btn-raised btn-default waves-effect">Logout</a>&nbsp;&nbsp;
            </div>
        </div>
    </nav>

Add comment

Kamil Paciepnik free answered 6 years ago

0 0 Best answer

Hi devtrix, please send files to my e-mail address with a detailed description of the problem - k.paciepnik@mdbootstrap.com Regards

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

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

devtrix

Pro User 84Support score
23Questions 12Answers 1Snippets