Hello,
I have a problem with Nav bar’s buttons. To be precise, one button is hidding another button which is next to it.
My “Portfolio” button is hidding a part of my “contact” button.
Could you help me with it?
Here’s my link:
i think there is an issue with using col-1 in your first row.
Something like this fixes it a little bit, but it is still not responsive.
You should look into some examples of navbars.
edit my code
<html>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
</head>
<style>
body {background-color: #737373;
margin-top: 60px;}
p {font-family: Monospace;
font-size: 20px;
color: #4d4d4d;}
/* SOCIAL MEDIA ICONS SETTINGS */
.fa:hover {
opacity: 0.7;
}
.fa {
padding: 10px;
font-size: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
margin: 5px 2px;
width: 50px;
height: 50px;}
.btn:hover {opacity: 0.3}
/*Facebok*/
.fa-facebook {
background: #3B5998;
color: white;
}
/*Twitter*/
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-instagram {background: #125688;
color: white;}
.fa-yahoo {background: #430297;
color: white;}
.navbar {
overflow: hidden;
background-color: #5900b3;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index: 99999;
}
.jumbotron {border-radius: 0%;
margin-bottom: 0px;
margin-left: 0px;}
.bg1 {background-color: #999999;}
.bg2 {background-color: #d9d9d9;}
.bg3 {background-color: #d9d9d9;}
.bg4 {background-color: #999999;}
.btn-dark {background: #5900b3;
color: white;}
.contact {font-size: 30px;}
#foto1 {border-radius: 100%;
filter: grayscale(40%);
width: 250px;
height: 250px;}
#aboutpage {font-family: Monospace;
font-size: 30px;
color: white;}
active {
background-color: #666;
color: white;
}
button.btn {
margin-left: 50px;
}
</style>
<html>
<nav class="navbar navbar-default ">
<div class="container-fluid justify-content-start text-center mynavbar">
<a href="#"><button type="button" class="btn btn-dark btn-lg"> Home</button></a>
<button type="button" class="btn btn-dark btn-lg"> About</button>
<button type="button" class="btn btn-dark btn-lg text-center"> Portfolio</button>
<a href="#contact"><button type="button" class="btn btn-dark btn-lg"> Contact</button></a>
</nav>
<div class="container">
<div id="about" class="jumbotron bg1">
<div class="row">
<div class="col-8">
<p><b>Michał Dziadkowiec</b> - Front End Developer :-D (total beginner). My intrests: drumming, music, sport, English language.</p>
</div>
<div class="col-4">
<img id="foto1" class="img-responsive img-fluid img-circle" src="https://scontent-sea1-1.cdninstagram.com/vp/6f26a7bfec1b1c2269162cfa77b5d61c/5B5C56CF/t51.2885-15/e35/13706834_1258794407485886_226924665_n.jpg?ig_cache_key=MTMwNTEwNDQwNjcwNjI5NjkyOQ%3D%3D.2" alt="Michał Dziadkowiec">
</div>
</div>
</div>
</div>
<div class="container">
<div id="portfolio" class="jumbotron bg2">
<h2 class="text-center">Portfolio</h2>
<div class="row">
<div class="col-6">
<img class="img-responsive img-fluid" src="https://wallpaperscraft.com/image/clouds_milky_way_eclipse_light_68883_1024x768.jpg" alt="Milky Cloud"></img>
</div>
<div class="col-6">
<img class="img-responsive img-fluid" src="https://wallpaperscraft.com/image/3d_photoshop_nature_landscape_15285_1024x768.jpg" alt="Nature landscape"></img>
</div>
</div>
<div class="row">
<div class="col-6">
<img class="img-responsive img-fluid" src="https://wallpaperstock.net/planet-and-the-field-wallpapers_12601_1024x768.jpg" alt="Planet and the Field"></img>
</div>
<div class="col-6">
<img class="img-responsive img-fluid" src="https://www.karpacz.pl/img/kalendarz/kwiecien2016_1024x768.jpg" alt="Paris The Eiffel"></img>
</div>
</div>
<div class="row">
<div class="col-6">
<img class="img-responsive img-fluid" src="https://wallpaperstock.net/planet-and-the-field-wallpapers_12601_1024x768.jpg" alt="Planet and the Field"></img>
</div>
<div class="col-6">
<img class="img-responsive img-fluid" src="https://www.karpacz.pl/img/kalendarz/kwiecien2016_1024x768.jpg" alt="Paris The Eiffel"></img>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<p id="contact" class="text-center contact">CONTACT ME</p>
<hr>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form group">
<label for="name"></label>
<input type="name" class="form-control" placeholder="Enter your name" id="name">
</div>
<div class="form group">
<label for="email"></label>
<input type="email" class="form-control" placeholder="Enter your email" id="email">
</div>
<div class="form group">
<label for="phone number"></label>
<input type="phone number" class="form-control" placeholder="Enter your phone number" id="phonenumber">
</div>
<div class="form group">
<label for="message"></label>
<input type="message" class="form-control" placeholder="Write your message" id="message">
</div>
<hr>
<button type="submit" class="btn btn-default"> Send</button>
</div>
<div class="col-6">
<p>Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions. You just feel free to drop me a line anytime.</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="jumbotron bg4">
<div class="row">
<div class="col-8">
<p id="aboutpage" class="text-center">About this Page</p>
<p>
<p>
<p class="text-center"> Made by <a href="https://www.facebook.com" target='_blank'> M.Dz.</a></p>
</div>
<div class="col-4">
<p>Visit my Social Media</p>
<a href="https://www.facebook.com" class="fa fa-facebook fa:hover" style="text-decoration:none" target='_blank'></a>
<a href="https://www.twitter.com" class="fa fa-twitter" style="text-decoration:none" target='_blank'></a>
<a href="https://www.instagram.com" class="fa fa-instagram" style="text-decoration:none" target='_blank'></a>
<a href="https://www.yahoo.com" class="fa fa-yahoo" style="text-decoration:none" target='_blank'></a>
</div>
</div>
</div>
</div>
<footer class="text-center">Written and coded by Michał Dziadkowiec</footer>
Also just a small tip, pop your CSS in the CSS editor section 
Freecodecamp just released a good article about navbars:
It’s a good article as they explain every element