Please help with allignment of my nav bar

#1

hi guys i would please like to know why does my nav bar (orange) go beyond the width of my viewport and exceed my header background (grey) how can i correct this so that my nav bar is flush with my header (gray)
kindly note i am still in the process of fixing my page but feedback is welcome

#2

Hey, looks like you already fixed this by yourself. If you need any more helps, just reply …

1 Like
#3

hi @michaelsndr thanks for taking out the time to view my project ,yes i have managed to sort it out . ive come to find that i had an added width property under my css style of nav ul {} turns out once i removed it everything came back to normal , kind of puzzles me because if i put width:100%; then it should be the entire lenght of my viewport but this was not the case .

  • ill set it back to what it looked like before so u can have an opportunity to view it
#4

if u have an answer as to why width:100%; gives the effect of my nav bar protruding beyond my header id appreciate it. for now id really like it you could please help me with positioning : “edc goat” as id like to have more freedom in moving it but i do not know how beyond whatever ive already tried.

for example:

  1. how can i have EDC GOAT in one line and not two seperate lines
  2. how can i shift the text EDC GOAT a little higher
#5

Hey, great that you could figure it out. How sizes are calculated in CSS is a little counterintuitive: size (meaning height or width) = total measurement - padding :exploding_head: You can change the behaviour to how most people would expect it to be, by adding this to the beginning of your CSS to solve your issue.

* { /* select all elements */
  box-sizing: border-box; /* height and width is, where the border is */
}

It’s part of many so-called ‘CSS resets’, which are worth looking up.

You can force them by adding a “non breaking space” &nbsp:
<h1>EDC&nbspGOAT</h1>

As your layout is structured now, decrease the value of top on the h1. (it can also be a negative value). Side note: You likely don’t want that kind of positioning on all <h1> of a layout. To be more flexible, I would suggest creating a class like: .hero-heading

h1 {
    position: absolute;
--  top: 0vw;
++  top: -1vw;
    left: 50vw;
    font-size: 10vw;
}
1 Like
#6

hi @michaelsndr your help is much appreciated , while working of my navigation , after having anchoring the contents in my nav bar the css for nav li { border-right: …}
has been overwritten , what can i possibly do to style my nav bar effectively ?

#7

Welcome. As of now I can not see a nav li { selector. I assume you found a different solution.

#8

hi @michaelsndr indeed i have ,thanks once again for taking out the time to view my project , i appreciate it very much :grinning:

1 Like
#10

hi @michaelsndr could u kindly review my product landing page and give me some tips and advice, im yet to work on the responsiveness but for now this should suffice ,
id also like to know 2 things

  1. if u click on “about” “products” and “video” it does not direct the scroll accurately to the content it seems to over run it abit , how may i resolve that
  2. if u take a look at my footer ( not the greatest) i just put it there simply for display :sweat_smile: id like to know how can i move “shipping policies” parralel to the first 3 listed items and start a new list . any advice on how to go about?
#11

Hi Muhammad, looks like you are making good progress.

You could add an invisible::before pseudo-element, that has the same height as your nav-bar:

#about::before,
#pricing::before,
#video::before {
  display: block;
  content: " ";
  height: 3rem;      // make this the same height as your navbar 
  margin-top: -3rem; // negative navbar-height
  visibility: hidden;
}

Here you could try something like:

ul { // make this a selector specific to the footer list
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
}
#12