Help Navigator menu not aligning properly on mobile phone (s7)

Basically what title says trying to get this menu to take up the full width on mobile devices but my buttons are mahsing together on the right with a awkward white space to the right as well. I thought I could avoid this problem by using xs columns in bootstrap but I am clearly missing something really important here about bootstrap. I have tried using both container and container fluid classes, and using display in-lineblock on various properties as well.

Any advice on how to get this to look the same on both mobile and desktop?


Not sure if I understood your problem correctly and I am still a newbie, so there are probably better solutions to this. I would consider to edit the default navbar found in bootstrap.

But I tried to play around with your code and ended up with this:


  <title> Christian Malpass Portfolio
  <meta name="viewport" content="width=device-width, initial-scale=1">
function scrollWin(x, y) {
    window.scrollBy(x, y);
  <div class = "navigate">
  <div class = "container">
     <div class = "row">
      <div class = "col-xs-6 googlefont">
        <p>Caffine Imp</p>
<div class="col-xs-6 center-block">
  <li><a class="button" id = "farLeft" onclick="scrollWin(0, 100) href="default.asp">About</a></li>
  <li><a class = "button" onclick="scrollWin(0, 100)" href="news.asp">Portfolio</a></li>
  <li><a class = "button" onclick="scrollWin(0, 100)"" href="contact.asp">Contact</a></li>
  </div> <!--row-->
  </div> <!--container-->
  </div> <!--navigate-->`indent preformatted text by 4 spaces`


.navigate {
background-color: #00b300;
font: #ff6600;

.button {
text-align: right;
padding-top: 20px;
font-size: 2.0vw;
cursor: pointer;
text-decoration: none;
outline: none;
color: darkpurple;
border: none;
border-radius: 15px;

.button:hover {
background-color: #cc5200;

#farLeft {
margin-right: 10px;
margin-left: 10px;

.googlefont {
font-family: ‘Seaweed Script’, cursive;
font-size: 25px;
padding-top: 15px;
padding-left: 30px;
font-size = 25px;
color: #cc5200

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;

li {
float: left;

li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;

When the screen get to 486px “contact jumps down” below “about”, because the text don’t fit the screen anymore. I would try to hide the navigator menu and add a hamburger menu at this point.

I hope this is helpful somehow.

Best regards

1 Like

Thats awesome very logical, thanks for the help that makes a lot of sense and I will definitely implement this.