Bootstrap 3 Navbar elements not aligned properly
Date : March 29 2020, 07:55 AM
wish of those help Try to use float: right; on both .nav and .navbar.
For additional adjusting on a vertical basis, you can use clear: both; on .nav. If it still does nothing, add !important at the end of the float statement. A Simple CSS solution for your problem!
|
navbar text elements not vertically aligned (CSS/Bootstrap)
Tag : html , By : somebody
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , There are a few issues. Bootstrap adds 10px bottom margin to ul. You can remove that bottom margin and use line-height to vertically align li inside ul See this code snippet: body {
background-color: #FFF;
}
#pageHeaderTop {
background-color: #FFFFFF;
width:100%;
border-bottom-style: solid;
border-width: 1px;
border-color: #D1D1D1;
height: auto;
}
#pageHeaderBottom {
background-color: #D1D1D1;
width:100%;
border-top-style: solid;
border-width: 1px;
border-color: #FFFFFF;
}
.logoHeader {
width: 1200px;
text-align: left;
padding: 20px;
}
.nav {
width: 1200px;
height: 30px;
}
.nav a {
color: #5A5A5A;
font-size: 11px;
font-weight: bold;
/* 10px top & bottom 14px left and right*/
padding: 10px 14px;
text-transform: uppercase;
}
.nav-ul {
margin-bottom: 0;
}
.nav li {
display: inline-block;
height: 30px;
line-height: 30px;
}
#pageContent {
border:#999 1px solid;
border-top: none;
background-color:#F4F4F4;
width:1200px;
}
.contentArea {
text-align: left;
margin-left: 24px;
}
#pageFooter {
border:#999 1px solid;
border-top: none;
background-color:#F4F4F4;
width:1200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<title>Rapid Codes - Get It Now!</title>
<link href="style/bootstrap.css" rel="stylesheet">
<link href="style/style.css" rel="stylesheet">
<body>
<div align="center" id="mainWrapper">
<div id="pageHeaderTop">
<div class="logoHeader">
<img src="http://www.rapidcodes.co.uk/style/NewLogo.png" width="400" height="50" alt="Logo"/>
</div>
</div>
<div id="pageHeaderBottom">
<div class="nav">
<ul class="pull-left nav-ul">
<li><a href="http://rapidcodes.co.uk">Home</a></li>
<li><a href="xbox.php">Xbox</a></li>
<li><a href="playstation.php">PlayStation</a></li>
</ul>
<ul class="pull-right">
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
<div id="pageContent">
<div class="contentArea">Test</div></div>
<div id="pageFooter">© 2015 Rapid Codes</div>
</div>
</body>
</html>
|
bootstrap navbar not aligned properly
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I'm running a site navrcholu.cz on latest wordpress and bootstrap. However my navbar is not displayed correctly expecially on tablets. It should be always like 30px from the top of the page. On desktop PC with FF or Chrome looks OK. Here is navbar code: , Based on your question, I'd modify the CSS like this: nav
{
position: fixed;
top: 0px;
}
|
Tag : html , By : Andrew Mattie
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Use a media query with your CSS so it doesn't change the mobile view. Working Example: @media (min-width: 768px) {
.nav {
margin-left: 212px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-left logo">
<img src="http://placehold.it/50x50/f00/fff" height="50px">
</a>
<a class="navbar-brand text-hide" href="#">title</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Bio</a>
</li>
<li><a href="#">Portfolio</a>
</li>
<li><a href="#">Freebies</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
Bootstrap navbar icons not aligned properly
Tag : html , By : Robert Daniel Pickar
Date : March 29 2020, 07:55 AM
hope this fix your issue On the ul element change the class to just nav instead of navbar-nav & add class d-flex <nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav d-flex">
<li class="nav-item">
<a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/search.svg" alt="" />
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/bell.svg" alt="" />
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/person.svg" alt="" />
</a>
</li>
</ul>
</nav>
|
Boards Message :
Related QUESTIONS :