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.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Jun 2019
    Posts
    1
    Member #
    60721

    Angry Bootstrap 4 navbar help

    Hello! Not sure where to put this question so sorry if I'm wrong on that.

    I am new to this and am trying to make a bootstrap site right now.

    I'm trying to make a responsive navbar. My navbar isn't scaling down. The menu items are 180px high and 300px wide (I know I'm not using percentages, I could not get that to work). Basically I would like to have that same menu (but increasingly smaller menu items) until it gets to the small screen size where I want the hamburger menu to come in. Right now the menu is not being responsive.

    Also, eventually I would like to not use the default "small" size and make my own completely custom menu for mobile/tablets without the hamburger menu, or a much more customized mobile menu.

    How can I achieve these two things? Thanks in advance, and this is my code:

    HTML
    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <!-- Custom font -->
        <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
        <!-- custom css file -->
        <link rel="stylesheet" type="text/css" href="style2.css">
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
        <title>Conceptual Site</title>
    </head>
    
    <body>
        <div class="container-fluid">
            <nav class="navbar navbar-expand-sm fixed-top navbar-light bg-custom">
                <!-- <a class="navbar-brand" href="#">Navbar</a> -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto mx-auto">
                        <li class="nav-item active">
                            <a class="nav-link navbar-custom pt-5" href="#">MY NAME</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link navbar-custom pt-5" href="#" style="background: #F7882F;">SERVICES</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link navbar-custom pt-5" href="#" style="background: #F7C331;">ABOUT</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link navbar-custom pt-5" href="#" style="background: #DCC7AA;">CONTACT</a>
                        </li>
                    </ul>
                </div>
        </div>
        </nav>
    
        <div class="container">
    
    
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
            <h2>Hello, world!</h2>
            <h1>NO NO NO</h1>
        </div>
    
    
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
    
    </html>
    CSS:

    Code:
    .bg-custom {
        /* background: #6B7A8F; */
        text-align: center;
        height: 180px;
    }
    
    .navbar-custom {
        height: 180px;
        width: 300px;
        color: white !important;
        font-size: 2.25rem;
    }
    
    
    /* #navbarSupportedContent {
        height: 180px;
        width: 100%;
    } */
    
    
    /* .navbar-expand-sm .navbar-nav .nav-link {
             padding: 0;
        color: white;
    } */
    
    .navbar-light {
        background: #6B7A8F;
    }
    
    
    /* .nav-link:hover {
        color: white !important;
        background: white !important;
    } */

  2.  


Remove Ads

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 -6. The time now is 02:57 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com