Navbar help

i cant get the navbar to go end to end on the page

26 Replies

I suggest that you create a codepen or similar so that people can better understand what your issue is. You don't need to add everything, just the relevant code

HarutoOP•8mo ago

ok im not sure how im gonna add the pic to it tho

ἔρως•8mo ago

you don't that's unnecessary to demonstrate the problem with the menu just set the background to black

HarutoOP•8mo ago

https://codepen.io/Ghost36/pen/GRLeYpE

Haruto

CodePen

Help

...

HarutoOP•8mo ago

there u go it needs help, thats why i named it Help the css i added is from my original code ping me if u can fix it

Chris Bolson•8mo ago

Firstly .navlist doesn’t exist in the html. Either give the UL element this class name or change the CSS selector to nag ul {. Secondly I recommend you move the inline styles that you have in the HTML into the css. And don’t bother with the float:left as you are using flex so that will have no effect.

HarutoOP•8mo ago

ok so i took out the css in the html, and added the class names, now what actually it isnt really working after i took out the css from the html

ἔρως•8mo ago

the idea is for you to copy-paste, but only the necessary to reproduce the problem if you're fiddling with html and css for the codepen, you should just start over

HarutoOP•8mo ago

can i paste the css?

ἔρως•8mo ago

stuff that isn't necessary include background images (you can use placeholders, if needed) is it a css issue?

HarutoOP•8mo ago

Yh prob

ἔρως•8mo ago

then you're kinda required to

HarutoOP•8mo ago

oh and type one of those tick marks for me im on phone so i cant do it yk the ones for the code?

ἔρως•8mo ago

` <-- this?

HarutoOP•8mo ago

yes

ἔρως•8mo ago

why do you need it?

HarutoOP•8mo ago

so its easier for the css

ἔρως•8mo ago

that's an invalid css character why would you put that in the codepen?

HarutoOP•8mo ago

/* Style for the navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Style for the list items in the navigation */
.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

/* Style for the individual list items */
nav li {
  margin: auto;
  padding: 0; 
}

/* Style for the links within the list items */
nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hover effect for the links */
nav .home:hover {
  color: #04659e;
}

nav .h:hover {
  color: #129eaa;
}

nav .b:hover {
  color: #11c491;
}

nav .d:hover {
  color: #c61b88;
}

.content {
  background: #333;
  color: #fff;
  
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -ms-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -o-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  
  border-radius: 1rem;
  text-align: center;
  position: relative;
  bottom: 20px;
}

.team {
  width: 100%;
  border-radius: 10px;
}

.home {
  color: deepskyblue;
}

.h {
  color: #17c8d8;
}

.b {
  color: #11c438;
}

.d {
  color: deeppink;
}
/* feel free to change ur colors*/

/* Style for the navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Style for the list items in the navigation */
.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

/* Style for the individual list items */
nav li {
  margin: auto;
  padding: 0; 
}

/* Style for the links within the list items */
nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hover effect for the links */
nav .home:hover {
  color: #04659e;
}

nav .h:hover {
  color: #129eaa;
}

nav .b:hover {
  color: #11c491;
}

nav .d:hover {
  color: #c61b88;
}

.content {
  background: #333;
  color: #fff;
  
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -ms-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -o-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  
  border-radius: 1rem;
  text-align: center;
  position: relative;
  bottom: 20px;
}

.team {
  width: 100%;
  border-radius: 10px;
}

.home {
  color: deepskyblue;
}

.h {
  color: #17c8d8;
}

.b {
  color: #11c438;
}

.d {
  color: deeppink;
}
/* feel free to change ur colors*/

there we go

ἔρως•8mo ago

that's not a codepen

Chris Bolson•8mo ago

In your codepen you have deleted the closing tag on the <li> elements and also the opening <a > so none of it works at the moment. I’m sure this isn’t the case in your original code but it doesn’t help debug it.

ἔρως•8mo ago

the code should be stripped just enough so that all the fat isn't included, but still perfectly reproduces the issue

HarutoOP•8mo ago

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>GhostCoders</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  
  <nav class="navbar">
    <ul class="nav-list">
      <li><a href="index.html" class="home">Home</a></li>
      <li><a href="assets/aboutH.html" class="h">Haruto</a></li>
      <li><a href="assets/aboutB.html" class="b">Boston2029</a></li>
      <li><a href="assets/aboutD.html" class="d">Delicemata</a></li>
      <!--<li><a></a></li> -->
    </ul>
  </nav>

  <img src="/assets/ghost.jpeg" class="team">
  <div class="content">
    <h1>GhostCoders</h1>
    <p></p>
  </div>
  
  
  
  <script src="script.js"></script>
</body>

<!-- I need all of our fav colors and things so we can make 3 diff pages about us. make another comment for yalls fav colors-->
<!-- yall can also add whatever yall want to the site. its about us!-->

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>GhostCoders</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  
  <nav class="navbar">
    <ul class="nav-list">
      <li><a href="index.html" class="home">Home</a></li>
      <li><a href="assets/aboutH.html" class="h">Haruto</a></li>
      <li><a href="assets/aboutB.html" class="b">Boston2029</a></li>
      <li><a href="assets/aboutD.html" class="d">Delicemata</a></li>
      <!--<li><a></a></li> -->
    </ul>
  </nav>

  <img src="/assets/ghost.jpeg" class="team">
  <div class="content">
    <h1>GhostCoders</h1>
    <p></p>
  </div>
  
  
  
  <script src="script.js"></script>
</body>

<!-- I need all of our fav colors and things so we can make 3 diff pages about us. make another comment for yalls fav colors-->
<!-- yall can also add whatever yall want to the site. its about us!-->

</html>

heres my html for reference im really messing with the css so it looks good, but i cant the the freaking navbar to fill the whole thing but then i also want the navbar to be on the img bc it just looks cool

HarutoOP•8mo ago

tell me this dont look cool

clevermissfox•8mo ago

the issue with using text on top of an image is that the image can shrink or grow so you never know where the text may fall on top of the image. esp with white AND black, its difficult to ensure that the text contrast will pass accessibility. like just in your screenshot, where the green is ober the white i cant read that at all. all i see is 'o' and '029'. you may want to consider giving the nav bar a background-color even if its semi-transparent or has a blur to ensure users can read the menu items. As the guys above have asked several times, its advised to throw your html and css into a codepen so ppl can easily debug and help you. If you make it easier, ppl are more inclined to help

Gaming

Programming

Navbar help