logo
down
shadow

Navbar buttons only pull right on smaller screens


Navbar buttons only pull right on smaller screens

By : user2955463
Date : November 22 2020, 10:40 AM


Share : facebook icon twitter icon
Fixed bottom navbar dropup menu drops down into navbar on smaller screens

Fixed bottom navbar dropup menu drops down into navbar on smaller screens


By : Umesh P
Date : March 29 2020, 07:55 AM
around this issue Take a look at this jsfiddle (click run): https://jsfiddle.net/q1c1L5y5/
I changed the name of your navbar-nav and nav-item classes to navbar-nav-special and nav-item-special so that they only use your styles and not any other bootstrap styles if they exist. This seems to work however, when the screen size is small it cuts off the popup to the right. So you'll need to pad the Username item a little more on the right or find another way. I'll try to mess with the padding in a bit and if I can get it I'll update this post. Here's what the updated code looks like from the fiddle:
code :
<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>Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<style type="text/css">
body {margin:70px 20px}

.navbar-nav-special {
float: none;
text-align: center;
}

.navbar-nav-special li {
float: none;
display: inline-block;
}

.mrmb {
margin-right:20px;
margin-top:-10px;
}

.nav-item-special {
height:100%;
width:20%;
}

.nav-itemm {
height:100%;
width:23%;
}

#navigation ul li {
display: inline;
padding:50px;
}

.inlinee{
white-space: nowrap;
}

.btn-group{
margin:10px;
}
</style>
</head>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">          
    <div>
        <ul class="nav navbar-nav-special">
            <li class="nav-item-special active"><a href="index.html" id="PostsLink">Posts</a><li>
            <li class="nav-item-special"><a href="submit.html" id="SubmitPostLink">Submit</a></li>
            <li class="nav-item-special"><a href="buy.html" id="BuyLink">Buy</a></li>
            <li class="nav-item-special inlinee"><a href="about_us.html" id="ContactUsLink">About Us</a></li>
        </ul>
    </div>
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div>
        <ul class="nav navbar-nav-special" style="margin-left:25%; margin-right:-25%;">
            <li class="nav-itemm"><a href="register.html" id="RegisterLink">Register</a></li>
            <li class="dropdown nav-itemm">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle" id="UserControls">Username</a>
                <ul class="dropdown-menu">
                    <li><a href="view_posts.html" id="ViewPostsLink">View Posts</a></li>
                    <li><a href="change_email.html" id="ChangeEmailLink">Change Email</a></li>
                    <li><a href="change_password.html" id="ChangePasswordLink">Change Password</a></li>
                    <li><a href="log_out.html" id="LogOutLink">Log Out</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
</header>
<body>
</body>
</html>
bootstrap navbar items not aligning properly on smaller screens

bootstrap navbar items not aligning properly on smaller screens


By : Douglas Fernando Bor
Date : March 29 2020, 07:55 AM
around this issue You've given .navbar-brand a width of 1000px, so it's occupying too much of the width of its container on smaller viewports (smaller screens), leaving no space for your other elements. Note that Bootstrap's .container class is responsive – it has a smaller width on smaller viewports.
Removing the width attribute for navbar-brand should resolve your issue.
navbar links overlap on smaller screens

navbar links overlap on smaller screens


By : user1744793
Date : March 29 2020, 07:55 AM
Resize navbar in smaller screens and move it to the right

Resize navbar in smaller screens and move it to the right


By : Chibi Pond
Date : March 29 2020, 07:55 AM
will help you we can not use same structure everywhere so just replace your above code with the following code
HTML
code :
<div class="container">
    <div class="row">
        <div class="col-sm-3">
           <img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
       </div>
       <div class="col-sm-9">
        <div class="row">
            <div class="col-sm-12">
                <ul class="top-navbar">
                    <li class=""><b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940</li>
                    <li class=""><b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i></li>
                    <li class=""><i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS</li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <nav class="navbar navbar-expand-lg navbar-light pb-0">
                    <button class="navbar-toggler ml-auto" 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 ml-auto">
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Proyectos</a>
                            </li>
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Especiales</a>
                            </li>
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Catálogo</a>
                            </li>
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Guía</a>
                            </li>
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Cotizador</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>
</div>
.top-navbar {
        list-style: none;
        float: right;
    }

    .top-navbar li {
        float: left;
    }
Site Navbar doesn't play animation on smaller screens

Site Navbar doesn't play animation on smaller screens


By : user3044166
Date : December 01 2020, 04:45 PM
shadow
Privacy Policy - Terms - Contact Us © ourworld-yourmove.org