Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Follow us on Twitter
Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Aug 2017
    Posts
    6

    bootstrap- hambuger menu items will not display unless hamburger button is pressed

    I am implementing a hamburger menu with bootstrap and following the generic code from the boot strap site, HOWEVER, as soon as I use `<ul>` tags, my menu items only appear when I hit the hamburger button.

    This means that when I resize the page from `300px` to `1200px`, the hamburger button doesn't change back to the inline menu, but stays as a button the whole time.

    Has anyone ever had this issue?

    ps. I've noticed that when I remove the `<ul>` and `<li>` tags from the script, the menus appears normally in a horizontal fashion.



    [menu WITHOUT ul or li tags][1]

    [1]: https://i.stack.imgur.com/Q5mMH.png

    [menu WITH ul or li tags][2]

    [2]: https://i.stack.imgur.com/3JrZj.png


    Code:
    <div class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
        
                    <div class="collapse navbar-collapse" id="mainNav">
                        <ul class="nav navbar-nav">
                            <li><a  href="../index.php">Home</a></li>
                            <li><a  href="index.php">Dashboard</a></li>
                            <li><a  href="add_post.php">Add Post</a></li>
                            <li><a  href="add_category.php">Add Category</a></li>
                            <li><a  href="uploadFile.php">Upload File</a></li>
                            <li><a  href="logout.inc.php">Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

  2. #2
    Junior Member
    Join Date
    Mar 2017
    Posts
    20
    What version of Bootstrap are you using and do you have the .js and .css linked in your page?
    edit: it works on Bootply https://www.bootply.com/new#
    Last edited by mlegg; 08-28-2017 at 09:25 PM.

  3. #3
    Junior Member
    Join Date
    Aug 2017
    Posts
    6
    I am using version 4, the latest one on the site. it's very strange how it works else where except in my code..I honestly cannot figure it out
    I do have a custom css linked to my page but even if i remove it it still does not work. no .js.

    Code:
    <?php include '../config/config.php'; ?>
    <?php include '../libraries/db.php'; ?>
    <?php include '../helpers/format_helper.php'; ?>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Admin</title>
        <!-- Bootstrap core CSS -->
        <link href="../css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="../css/custom.css" rel="stylesheet">
        <link href="../css/signUpPage.css" rel="stylesheet">
    </head>
    <body>
    
    <div class="navbar navbar-inverse blog-masthead">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
    
                <div class="collapse navbar-collapse" id="mainNav">
                    <ul class="nav navbar-nav">
                        <li><a  href="../index.php">Home</a></li>
                        <li><a  href="index.php">Dashboard</a></li>
                        <li><a  href="add_post.php">Add Post</a></li>
                        <li><a  href="add_category.php">Add Category</a></li>
                        <li><a  href="uploadFile.php">Upload File</a></li>
                        <li><a  href="logout.inc.php">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container">
    
        <div class="blog-header">
            <h2>Admin Area</h2>
    
        </div>
    
        <div class="row">
    
            <div class="col-sm-12 blog-main">
            <?php if(isset($_GET['msg'])) : ?>
                <div class="alert alert-success"><?php echo htmlentities($_GET['msg'])?></div>
            <?php endif ?>

  4. #4
    Junior Member
    Join Date
    Aug 2017
    Posts
    6
    I am using version 4, the latest one on the site. it's very strange how it works else where except in my code..I honestly cannot figure it out
    I do have a custom css linked to my page but even if i remove it it still does not work. no .js.

    Code:
    <?php include '../config/config.php'; ?>
    <?php include '../libraries/db.php'; ?>
    <?php include '../helpers/format_helper.php'; ?>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Admin</title>
        <!-- Bootstrap core CSS -->
        <link href="../css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="../css/custom.css" rel="stylesheet">
        <link href="../css/signUpPage.css" rel="stylesheet">
    </head>
    <body>
    
    <div class="navbar navbar-inverse blog-masthead">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
    
                <div class="collapse navbar-collapse" id="mainNav">
                    <ul class="nav navbar-nav">
                        <li><a  href="../index.php">Home</a></li>
                        <li><a  href="index.php">Dashboard</a></li>
                        <li><a  href="add_post.php">Add Post</a></li>
                        <li><a  href="add_category.php">Add Category</a></li>
                        <li><a  href="uploadFile.php">Upload File</a></li>
                        <li><a  href="logout.inc.php">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container">
    
        <div class="blog-header">
            <h2>Admin Area</h2>
    
        </div>
    
        <div class="row">
    
            <div class="col-sm-12 blog-main">
            <?php if(isset($_GET['msg'])) : ?>
                <div class="alert alert-success"><?php echo htmlentities($_GET['msg'])?></div>
            <?php endif ?>

  5. #5
    Junior Member
    Join Date
    Mar 2017
    Posts
    20
    Do you have the BS4 css linked in the head section?
    HTML Code:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    and under the footer you have the BS js linked for the menu to work This is from the BS documentation
    "Add our optional JavaScript plugins, jQuery, and Popper.js) near the end of your pages, right before the closing </body> tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend on them. While we use jQuery’s slim build in our docs, the full version is also supported.HTML"

    HTML Code:
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  6. #6
    Junior Member
    Join Date
    Aug 2017
    Posts
    6
    yes I have the BS4 css linked to the head and the 3 scripts linked near the end of the body tag.

  7. #7
    Junior Member
    Join Date
    Mar 2017
    Posts
    20
    use class="nav-link" in the navbars with BS 4. https://getbootstrap.com/docs/4.0/components/navbar/

    <a class="nav-link" href="../index.php">Home</a></li>

  8. #8
    Junior Member
    Join Date
    Aug 2017
    Posts
    6
    that styled the links but it is still not working as planned. Does it have anything to do with IDE? I am using PHP storm and have sublime..on both I have the same problem

  9. #9
    Junior Member
    Join Date
    Mar 2017
    Posts
    20
    I'm not sure about that at all. I'm sorry.

  10. #10
    Junior Member
    Join Date
    Aug 2017
    Posts
    6
    No problem thanks for trying!


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT. The time now is 05:46 AM.
Powered by vBulletin® Version 4.2.0
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com