I have the following NavBar set up in Bootstrap. At the moment, it aligns so that the gaps between the links and logo are all the same distance. However, as the Link Names are different sizes this means that the Logo isn't actually in the middle of the navbar and looks a bit odd. How can I align the items, such that their centers are spaced equally?
<nav class="navbar navbar-default">
<div class="container-fluid" id="logoStripe">
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav links">
<li><h1>About</h1></li>
<li><h1>Pre-Order</h1></li>
<img src="Images/Logo.png" alt="Logo" style="width:auto; height:75px; padding-top:5px; padding-bottom:5px;">
<li><h1>News</h1></li>
<li><h1>Contact Us</h1></li>
</ul>
</div>
</div>
</nav>
CSS:
.links {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 28px;
color: #FFFFFF;
vertical-align: bottom;
margin-top: 0px;
}
.navbar-default{
border:hidden;
}
#logoStripe {
background-color: #54534a;
}
If you are sure that you will have only those four links, you can add this CSS code to your styles and it should work:
.links > * {
width: 20%;
text-align: center;
}
or
.links > img, .links > li {
width: 20%;
text-align: center;
}
This way you make sure that every item will take equal amount of space and its content will be centered.
Related
I'm a complete novice here, I want to put the vault-tec image on the left side aligned with the navigation menu,
<body>
<div class="container">
<nav class="navbar">
<img src="/images/vault-tec.png" alt="vault-tec-logo" />
<div class="home">Home</div>
<div class="about">About</div>
<div class="services">Services</div>
</nav>
</div>
</body>
Here's the css input:
`
.container {
background-color: #35538b;
height: 300px;
}
.navbar {
gap: 50px;
display: flex;
float: right;
font-size: 30px;
font-family: monospace;
align-items: center;
color: #eac852;
}
.navbar img {
width: 300px;
height: 200px;
justify-content: flex-start;`
I tried with the flex properties display, align-item...it's not working, I want to know what exactly I'm doing wrong. I attached an image for reference.
Thanks
You can use align-self and margin-right to align the image to the top left side, your CSS code should look like this:
.navbar img {
width: 300px;
height: 200px;
align-self: flex-start;
margin-right: auto;
}
Is that how you want it to be? Did I get right?
body{
margin:0;
}
.container {
background-color: #35538b;
height: 300px;
}
.navbar {
gap: 50px;
display: flex;
float: right;
font-size: 30px;
font-family: monospace;
align-items: center;
color: #eac852;
}
.navbar .logo {
padding:15px;
width: 300px;
height: 200px;
display:flex;
align-items:center;
}
.logo img{
width:100%;
height:100%;
}
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="https://images.pexels.com/photos/9604815/pexels-photo-9604815.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="vault-tec-logo" />
</div>
<div class="home">Home</div>
<div class="about">About</div>
<div class="services">Services</div>
</nav>
</div>
By putting the features of the Flexbox, it is distributed to all its children in the same way. Therefore, if you want to change the position properties of any of them without changing the status of the rest, you can use self-align or make position property for your navbar equal to "relative" and the img position property equal to "absolute" and you can manipulate its position by top bottom left right properities. Or, I suggest that it is better for you to make the icons in a new container and control this container in its place or the location of its children icons in it easier, and you will also be able to control the image more smoothly
I would like to place an image on a div which I use for a navigation bar, but when I resize the image to 50px or above, the padding on the div gets bigger as well. I don't like this since the image will either be too small to see or the navigation bar will be too big to look pleasing, any ideas on how to fix this?
.navbar{
background-color:green;
padding:20px;
}
.navbar #image1{
width:40px;
margin-left:950px;
padding:0px;
}
<div class='navbar'>
<a href='home.html'>Home</a>
<a href='1.html'>Profile</a>
<a href='2.html'>Transactions</a>
<a href='3.html'><p>Settings</p></a>
<img src='https://picsum.photos/200/300' id='image1'/>
</div>
You should first start by removing
margin-left:950px
as the margin will exclude your item from your navbar
then apply flex properties to your navbar
.navbar {display : flex}
so your navbar items become in the same line
I recommend checking out this flex-box guide as well flexbox properties
can you please share the image's link so we can help you?
also you most edit margin-left:950px; to margin-left: auto; if you want to center it
and this is an example navbar code (press run to see what is it)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
padding: 10px 20px;
background: black;
color: white;
display: flex;
align-items: center;
}
.navbar li{
list-style: none;
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
.navbar li a{
color: white;
text-decoration: none;
}
.navbar li:hover,
.navbar li a:hover{
color: #666;
}
.navbar img{
width: 50px;
height: 50px; /*or :auto ; */
}
<ul class="navbar">
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
</ul>
<br><br><br>
<p>or</p>
<br><br><br>
<ul class="navbar">
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
</ul>
I think you need to learn the basics before start doing websites
I'm struggling with the alignment in the following navbar that uses Bootstrap 3.
Problem: The Login and Signup elements are on different rows. Whats the correct way to adjust them so that they are both on the same line? display: inline-block; and white-space: nowrap; does not appear to work on the li elements.
Note that the input element should fill up the space between the logo and the Login/Signup elements.
Bootply: http://www.bootply.com/Bh5TBV9vS0
<nav class="navbar navbar-default navbar-fixed-top">
HTML
<a class="brand" href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" width="100">
</a>
<form role="form" class="form-horizontal search-form">
<!-- <i class="fa fa-search"></i> -->
<input type="text" class="form-control" placeholder="Search">
</form>
<ul class="nav navbar-nav">
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
CSS:
.brand {
width: 170px;
height: 80px;
background-color: #ccc;
display: inline-block
}
.navbar.transparent.navbar-inverse .navbar-inner {
background: rgba(0,0,0,0.4);
}
.search-form {
width: 100%;
height: 30px;
display: inline-block;
}
.search-form {
margin-top:10px;
padding: 0 10px;
}
nav { display: flex; }
Remove float:left for your list items and apply dispaly:inline-block and apply the style white-space:nowrap for your ul element.
ul.navbar-nav{ white-space:nowrap;}
.navbar-nav li{display:inline-block; float:none;}
I have updated width of .search-form from 100% to 76% and now it works fine.
Check here
I am setting a responsive layout for my personal website, which has worked in a simple example. However I am not getting the same results. It may have something to do with including the Bootstrap files in my html. Below is the html and css code for the responsive layout:
HTML:
<header>
<a href="/" id="logo">
<h1>Brian Weber</h1>
<h2>Engineer | Python Programmer</h2>
</a>
<!-- Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="navbar-brand" href="#">Brian Weber</a>
<p>Engineer</p> -->
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
</div>
</header>
CSS:
#media screen and (min-width: 660px) {
/*********************************
HEADER
*********************************/
.navbar .navbar-default {
float: right;
background: none;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
#logo h1 {
font-size: 2.5em;
}
#logo h2 {
font-size: 1.7em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
}
}
When I check the code in a browser, the h1 and h2 text do not appear. However when I inspect the element there are placeholders for where the text should be. The text color is already set to black in the main.css. My question is how would I fix this problem so that the layout looks like the picture below? I am thinking maybe there is an issue with the bootstrap files where they are overriding the CSS code.
Correct format for header and navbar
h1 and h2 text disappearing
Add this in your style
#logo
{
z-index:1;
position:relative;
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order. and in your style navbar-default hide the h1 and h2 that's why it's not looking
Make .navbar-default float right when in the larger views. It was covering up the left floating div that contained your name etc.
Add position:relative; and z-index for logo.
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
position: relative;
z-index: 1;
}
I have a bootstrap navbar that I need to span the entire width of the screen, but have the logo and link at the right stay the consistent width of the container below it, as illustrated below, and not have the LINK on the right jump to the logo and logo shoved to the left below 768px when shrunk down:
[=============LOGO------------------------------------------LINK=============]
| |
| |
| |
When the user downsizes the screen, the navigation items should remain inline with the content below.
<nav class="navbar navbar-default">
<ul class="nav nav-justified centered">
<li><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="140" height="40">
</li>
<li><a class="getapp" href="#">LINK</a>
</li>
</ul>
</nav>
<div class="container">
CONTENT
</div>
.navbar {
background-color: #000;
}
.centered {
width:100%;
margin:0 auto;
}
.nav>li{
display:table-cell;
}
JSFIDDLE: LINK
I found a simple solution by setting the outer div of the nav and the content container to use .inside which contains the nav and content to the same width. When the window is resized, the navigation and page content grow and shrink at the same rate.
<nav>
<div class="inside">
<div class="logo">
<img src="logo.png">
</div>
<div class="links">
<img src="image.png">
</div>
</div>
nav{
position: fixed;
top: 0;
height: 70px;
width: 100%;
background: #000;
z-index: 99999;
}
.logo{
float: left;
padding-top: 15px;
}
.links{
float: right;
line-height: 50px;
padding-top: 20px;
padding-right: 15px;
}
.inside{
width: 90%;
margin: 0 auto;
}