CSS code on a computer screen
HTML/CSS,  Instructional Design

.Class versus #Div

As I continue my journey through the world of CSS, I have learned an important lesson between a class and a div. I have been using the Additional CSS field within my theme as I find it to be the safest option to experiment and not break my page. While searching for a way to fix my main navigation menu to the page when scrolling I learned that if the content is a class then you must place a period (.) before it and if the content is a div you must place a hashtag (#) before it. Here I was just throwing those around with no rhyme or reason.

Additionally, I was taught that a class is typically used for things that might repeat on a site where a div is used for bigger individual items. For instance, the main navigation and header use div because there often are not multiple of those. However, when I adjusted my blog post images a few weeks ago those were defined as a class because the possibility of there being more than one is strong.

After that lesson, I found that sticking my current main menu to its location, which was under the header image, was a tricky situation. I spent an hour researching ways and testing out different combinations until I was officially stuck. Since I have no shame I went to the one person who could probably steer me in the right direction, my husband. After a bit more research it was determined that I would have to use Javascript or move my main menu to the top of the page. Since my main goal is to learn CSS and not Javascript I went with option two. Now my menu sticks to the top of the page and the navigation is always accessible to my visitors.

In order to stick the landing, I had to fix the main navigation to the top of the page and move the header down a few pixels. Here is what I added in the additional CSS field:

#main-nav {
position: fixed;
width: 100%;
top:0;
}
#page-header {
margin-top: 28px;
}

Although it was not the solution I set out to accomplish I think it was a good compromise at this point. Let’s chat about your CSS journey!

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php
Font Resize