Results 1 to 10 of 10

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

  1. 08-25-2017, 09:07 PM #1
    asus
    asus is offline
    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>
    Reply With Quote Reply With Quote
  2. 08-28-2017, 09:15 PM #2
    mlegg
    mlegg is offline
    Junior Member
    Join Date
    Mar 2017
    Posts
    22
    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.
    Reply With Quote Reply With Quote
  3. 08-30-2017, 01:24 AM #3
    asus
    asus is offline
    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 ?>
    Reply With Quote Reply With Quote
  4. 08-30-2017, 01:25 AM #4
    asus
    asus is offline
    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 ?>
    Reply With Quote Reply With Quote
  5. 08-30-2017, 02:53 PM #5
    mlegg
    mlegg is offline
    Junior Member
    Join Date
    Mar 2017
    Posts
    22
    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>
    Reply With Quote Reply With Quote
  6. 08-31-2017, 04:56 AM #6
    asus
    asus is offline
    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.
    Reply With Quote Reply With Quote
  7. 08-31-2017, 11:45 AM #7
    mlegg
    mlegg is offline
    Junior Member
    Join Date
    Mar 2017
    Posts
    22
    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>
    Reply With Quote Reply With Quote
  8. 09-01-2017, 04:09 AM #8
    asus
    asus is offline
    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
    Reply With Quote Reply With Quote
  9. 09-01-2017, 05:01 PM #9
    mlegg
    mlegg is offline
    Junior Member
    Join Date
    Mar 2017
    Posts
    22
    I'm not sure about that at all. I'm sorry.
    Reply With Quote Reply With Quote
  10. 09-01-2017, 07:35 PM #10
    asus
    asus is offline
    Junior Member
    Join Date
    Aug 2017
    Posts
    6
    No problem thanks for trying!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules