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
Hey, looks like you already fixed this by yourself. If you need any more helps, just reply âŚ
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
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:
- how can i have EDC GOAT in one line and not two seperate lines
- how can i shift the text EDC GOAT a little higher
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 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â  
:
<h1>EDC GOAT</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;
}
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 ?
Welcome. As of now I can not see a nav li {
selector. I assume you found a different solution.
hi @michaelsndr indeed i have ,thanks once again for taking out the time to view my project , i appreciate it very much
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
- 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
- if u take a look at my footer ( not the greatest) i just put it there simply for display
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?
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;
}