My menu bar does not go all the way to the left, there is a small white area on that side? Also when I jump to section the bar covers up my header, i could add a couple of br br to space it down so it is not covered but I am guessing there is a better way to do that?
@Tom856 Hi, I’m a newbie. Here are some of my observations on your codepen…
-
Menu bar does not go all the way to the left - your body has margins
-
Images - you used table. Bootstrap grid system is better/appropriate. I’ve read that tables are to be used only for tabular data and not for sectioning parts of html
-
Menu bar covering sections - I’m also looking for a solution to that.
1 Like
As above, if you remove the body margins your menu will cover the whole page like you wanted. You can then use the padding property on your main div to stop the menu covering text and stop your text touching the sides at the same time. You could either say do
.main {
padding: …;
/* Add same padding everywhere*/
}
or
.main {
padding-top: …;
padding-left: …;
padding-right: …;
padding-bottom: …;
/* Add varying padding */
}If you’re going to use px measurements to define the padding size, might also be worth fixing the heading height in px to ensure it never overlaps on any browser/screen-size.
Thanks for the help all.