CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
xCasper
xCasper

Reputation: 123

How can I add additional links to bootstrap when collapsed

For the website I am working on I have two sets of links. The first is in a navbar at the top of the screen and consists of my account and login. Then I have a second nav a little ways down on the page and I was wondering if there is a way I can add those links to the collapsed menu. As of now the collapsed menu only displays the two links that are in the navbar.

Note: I have tried adding the second navbar to the navbar-collapse and collapse classes. This makes it so that the 2nd nav does not display when the page is < 768px and the 2nd nav links do appear when you click the icon (3 horizonal '-'). The links from the 2nd nav, however, do not appear with the two links from the main navbar.

The code below should help clarify what I am trying to say:

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head      content must come *after* these tags -->
    <title>Bootstrap Project - Landing Page</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <style>
        #container-top{
            background-color: #65000A;
            color: white;           
        }

        .navbar-default .navbar-nav li a {
            color: white;
        }

        #welcome{
            position: relative;
            top: 12px;
            margin-right: 20px;
        }

        .navbar-default .navbar-nav .active a{
            background-color: white;
            color: #4F5153;
        }

        .navbar-default .navbar-nav li a:hover{
            color: #D76E73;
        }

        #topContainer {
            height: 400px;
            width: 100%;
            background-size:cover;
        }

        #topContainer2 {
            background-color: red;
            height: 400px;
            width: 100%;
            background-size:cover;
        }

        .break {
            clear:both;
        }

        #logoDiv {
            width: 400px;
            float: left;
        }

        #logoDiv a{
            text-decoration: none;
        }

        #mainDiv {
            font-family: Georgia, serif;
            margin-top: 75px;
            margin-left: 50px;
        }

        .imgLogo {
            position: relative;
            top: 7px;
            width: 50px;
            height: 50px;
            float: left;
            margin-right: 5px;
        }

        #mainDiv h1{
            color: #65000A;
            margin: 0;
            font-size: 2.3em;
            margin: 0;
            padding: 0;
        }

        #subLogo{
            color: #65000A;
            margin: 0;
            padding: 0;
            font-size: 1.2em;
            font-weight: bold;
        }

        #mainNav {
            margin-top: 20px;
            margin-bottom: 20px;
            color: #4F5153;
        }

        #mainNav ul{
            position: relative;
            top: 10px;
        }

        #mainNav li{            
            list-style: none;
            font-weight: bold;
            font-size: 0.9em;
            border-right: 1px solid #d6d6d6;            
            height: 100%;
            padding: 10px 20px 12px 20px;
            float: left;
        }       






        .bold {
            font-weight: bold;
        }

        .marginTop {
            margin-top: 30px;
        }

        .center {
            text-align: center;
        }

        .title {
            margin-top: 100px;
            font-size: 300%;
        }

        #footer {
            background-color: #B0D1FB;
            padding-top: 70px;
            width: 100%;
        }

        .appstoreImage {
            width: 250px;
        }
    </style>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">

    <div class="navbar navbar-default navbar-fixed-top" id="container-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>      
                </button>
                <p><span id="welcome">Welcome to Celebrity Beauty Online!</span></p>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navLink">
                    <li class="active"><a href="#home"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
                    <li><a href=""><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="container contentContainer" id="topContainer">
        <div class="row">
            <div class="" id="mainDiv">
                <div id="mainTop">
                    <div id="logoDiv">
                        <a href="index2.html">
                            <img class="imgLogo" src="images/clapperboard_logo.png" />
                            <h1 class="marginTop" id="logo">XYZ</h1><span id="subLogo">BEAUTY SUPPLY &#38 SALON</span>
                        </a>
                    </div>

                    <div class="collapse navbar-collapse" id="mainNav">
                        <ul class="nav navbar-nav">
                            <li>Home</li>
                            <li>About</li>
                            <li>Salon</li>
                            <li>Current Sales!</li>
                            <li style="border-right:none;">Contact Us</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>

Thank you for the help!

Upvotes: 0

Views: 83

Answers (1)

Steve
Steve

Reputation: 546

You could duplicate the menu items into your navbar but make them hidden for bigger displays.

If you add this to your navbar it will be hidden for the md and lg displays.

<li class="hidden-md hidden-lg">About</li>

If you want to hide your second menu container you created you could add the classes to the div to hide it in the smaller displays

<div class="container contentContainer hidden-xs hidden-sm" id="topContainer">

Upvotes: 1

Related Questions