Hello, guys!
1.) Can’t understand how to insert a logo into the navbar. I saw a code where logo was put into the container with
- tag, but still can’t understand how to do it with my code.
2.) I also made my navbar-right, but can’t understand how to place my text in the middle of the navbar (so the margins from the top and bottom were the same.
Here how it looks now: https://codepen.io/dmtrzz/pen/aybKPL
Here is my code:
HTML
<a href="#top"><img src="http://cdn1.savepice.ru/forum/uploads/2017/7/28/3007d3456772333910400870b0530a18-full.png" title="Golfer"/></a>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="195">
<ul class="nav navbar-nav navbar-right navbar-collapse navbar-collapse">
<li><a class="scrollable" href="#top"><i class="fa fa-home"></i></a></li>
<li><a class="scrollable" href="#aboutus">About Us</a></li>
<li><a class="scrollable" href="#buy">BUY</a></li>
<li id="right"><a href="#contacts">Contacts</a></li>
</ul>
</nav>
</div>
CSS (in a little mess):
body {
background-color: rgb(230,230,230);
}
nav {
margin: 0%;
height: 80px;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.navbar-default {
background-color: white;
border-color: white;
border-width: 0px;} li { font-family: "Copperplate Gothic Light", garamond; letter-spacing: 0px; font-weight: bold; } img{ margin-left: auto; margin-right: auto; display: block; } #right { margin-right: 30px; } .affix { width: 100%; top: 0; } .bckgrnd{ background-image: url(http://cdn1.savepice.ru/forum/uploads/2017/7/27/4cc368954c746ebeab2ecfb9d7b309e2-full.jpg); border-left: 10px double white; border-top: 10px double white; border-right: 10px double white; border-bottom: 10px double white; } .img-responsive{ width: 300px; margin-top: 10px; margin-bottom: 10px;}