locked
navbar menu toggler is not fully visible in mobile menu RRS feed

  • Question

  • User-1355965324 posted

    Hi

    When I  shrink the screen into mobile view the navbar menu toggler is not full visible 

    https://drive.google.com/open?id=1K57hQaYeuSc4sl7A3Ds0q8JkrPwb4Pxx

    My code is as given below

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />
    
    
        <link rel="stylesheet" href="css/style.css">
        <title>Bootstrap Theme</title>
    </head>
    
    <body>
        <div class="site-header">
    
            <a href="#default" class="logo">CompanyLogo</a>
            <div class="header-right">
                <a class="fa fa-phone" href="#Telephone">Tele: 3432432</a>
                <a class="fa fa-envelope-o" href="#MailTo">mailto: info@mycompany.com</a>
            </div>
        </div>
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            <div class="container">
                <a href="index.html" class="navbar-brand">My Company</a>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
          </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a href="index.html" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="about.html" class="nav-link">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a href="services.html" class="nav-link">Services</a>
                        </li>
                        <li class="nav-item">
                            <a href="blog.html" class="nav-link">Blog</a>
                        </li>
                        <li class="nav-item">
                            <a href="contact.html" class="nav-link">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>
    
    My Style sheet is as follows
    
    .site-header {
        width: 100%;
        overflow: hidden;
        /* background-color: #f1f1f1; */
        background-color: #a81323;
        padding: 20px 10px;
    }
    
    
    /* Style the header links */
    
    .site-header a {
        float: left;
        /* color: black; */
        color: white;
        text-align: center;
        padding: 12px;
        text-decoration: none;
        /* font-size: 18px; */
        line-height: 25px;
        border-radius: 4px;
    }
    
    
    /* Float the link section to the right */
    
    .header-right {
        float: right;
    }
    
    @media screen and (max-width: 500px) {
        .header a {
            float: none;
            display: block;
            text-align: left;
        }
        .header-right {
            float: none;
        }

    Please can you help

    Sunday, August 5, 2018 6:57 AM

All replies

  • User283571144 posted

    Hi polachan,

    I suggest that you could customize the margin-right of navbar menu. I’ve made a sample according to your code. I define a new class “selfmargin” and  set the margin-right as 50px. Then it shows  fully visible. 

    Besides, I think you could use the  F12 Developer Tools to help you modify the css style. If you use this tool you could see the effect from the page before and after modifying the html value.

    More details, you could refer to below codes:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>Bootstrap Theme</title>
    </head>
    
    <body>
        <div class="site-header">
            <a href="#default" class="logo">CompanyLogo</a>
            <div class="header-right">
                <a class="fa fa-phone" href="#Telephone">Tele: 3432432</a>
                <a class="fa fa-envelope-o" href="#MailTo">mailto: info@mycompany.com</a>
            </div>
        </div>
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            <div class="container">
                <a href="index.html" class="navbar-brand">My Company</a>
                <button class="navbar-toggler selfmargin" data-toggle="collapse" data-target="#navbarCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a href="index.html" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="about.html" class="nav-link">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a href="services.html" class="nav-link">Services</a>
                        </li>
                        <li class="nav-item">
                            <a href="blog.html" class="nav-link">Blog</a>
                        </li>
                        <li class="nav-item">
                            <a href="contact.html" class="nav-link">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>
    </html>
    .css
    .site-header {
        width: 100%;
        overflow: hidden;
        /* background-color: #f1f1f1; */
        background-color: #a81323;
        padding: 20px 10px;
    }
    
    
        /* Style the header links */
    
        .site-header a {
            float: left;
            /* color: black; */
            color: white;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            /* font-size: 18px; */
            line-height: 25px;
            border-radius: 4px;
        }
    /* Float the link section to the right */
    .header-right {
        float: right;
    }
    
    @media screen and (max-width: 500px) {
        .header a {
            float: none;
            display: block;
            text-align: left;
        }
    
        .header-right {
            float: none;
        }
    
    .selfmargin{
        margin-right:50px;
    }
    
    

    Result:

    Best Regards

    Brando 

    Monday, August 6, 2018 6:10 AM