Help in the Personal portfolio project?

Help in the Personal portfolio project?
0

#1

I am having trouble with the nav bar in the webpage. The buttons do not float to the right?
Here is my HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- This is where the code starts -->
<body data-spy="scroll" data-target=".navbar" data-offset="100">
<!-- Top navigation -->
<nav class= "navbar navbar-toggleable-sm navbar-inverse fixed-top" style="background-color:purple;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://qlip.in/images/qlip.png" height="50">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target=#mainNav>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li><a class="nav-item nav-link" href="#about"><strong><span class="edit">ABOUT</span></strong></a></li>
<li><a class="nav-item nav-link first" href="#portfolio"><strong><span class="edit">PORTFOLIO</span></strong></a></li>
<li><a class="nav-item nav-link" href="#contact"><strong><span class="edit">CONTACT</span></strong></a></li>
</ul>
</div>
</div>
</nav>
<!-- About Section -->
<div id="about">
Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.<br>
<img src="http://qlip.in/images/avatar.jpg"><br>
Web Developer - User Experience Designer - Graphic Artist
</div>
<div id="portfolio">
<p>Hi</p>
</div>
</body>

This is my CSS:

.edit{
  color:grey;
  font-size:15px;
}
.active{
  background-color:white;
}
body { 
    padding-top: 75px; 
}
ul.nav{
  float:right;
}
nav ul li{
  list-style:none;
  float:right;
  margin:10px;
}

I have tried a lot of things but none of them seem to work.


#2

can you put this in a codepen next time? Makes it alot easier for us to help you.

At first I was completely lost… Then I realized you were using bootstrap 4. Things work a little different there with the inclusion of flexbox. First remove all those float: right; styles.

On your div.navbar-nav tag add .ml-auto.
This should push your navbar elements to right.

On the other hand .mr-auto will bring it to the left… Weird I know…

Heres an example.

<ul class="navbar-nav ml-auto">
    <li><a href="#">Right</a></li>
    <li><a href="#">Right</a></li>
    <li><a href="#">Right</a></li>
</ul>

Happy coding! :slight_smile:


#3

Thanks so much. I’ll just include the codepen next time.