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

1

https://codepen.io/furofo/full/RGxwob/

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?

2

Hi.

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:

HTML :

<head>
  <title> Christian Malpass Portfolio
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
function scrollWin(x, y) {
    window.scrollBy(x, y);
}
</script>
</head>
<body>
  <div class = "navigate">
  <div class = "container">
     <div class = "row">
      <div class = "col-xs-6 googlefont">
        <p>Caffine Imp</p>
      </div>
 
<div class="col-xs-6 center-block">
<ul>
  <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>
</ul>
</div>
      
  </div> <!--row-->
  </div> <!--container-->
  </div> <!--navigate-->`indent preformatted text by 4 spaces`
  
</body>

CSS:

.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;
background-color:#00b300;
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
Tommy

1 Like
3

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