Website Navbar Styling

[SgtBot]

I'm trying to make a basic navigation bar for a website, and I am adding social media icons in the navigation bar as well. I have some basic styling done with it to get the social media icons to actually sit in the navigation bar, but I feel like the way I do it will break on different devices. Below is a screenshot of what the navbar looks like and the css code that is organizing it. Any advice or tips would be appreciated :)

 

body {
	background-image: url("keto.jpg");
}

.navbar {
	font-family: "Times New Roman", Times, serif;
	font-style: normal;
	font-size: 20px;
}

.navleft {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
}

.navleft li {
	float: left;
}

.navleft a {
	display: block;
	color: pink;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

.navleft a:hover {
	background-color: #FFC0CB;
	color: #333;
	font-style: oblique;
}

.navright {
	list-style-type: none;
	margin-top: -42px;
	padding: 0;
	overflow: hidden;
	background-color: #333;
}

.navright li {
	float: right;
	display: inline;
}

.navright a {
	padding: 5px 5px;
}

.navright img {
	width: 35px;
	height: 35px;
}

 

[Joeytyndale]

Hard to tell exactly what it will do. But if you want to know exactly what it will do on mobile screens you can define those rules explicitly. For example:

 

@media only screen and (max-width: 600px) {
  .navbar {
    width:100%;
  }
  .navleft {
   	etc...... 
  }
}

 

[fringie]

As @Joeytyndale mentioned you'll want to use media queries to customise the mobile experience.

 

Some other things you might be interested to know:

1. I noticed you use negative margin, until you're more familiar with CSS I recommend avoid doing unless you 100% need to. It'll force you to understand how to position things correctly (imo). Negative values are useful but it's quite common for people to use them without understanding what's happening which leads to bugs. If you position things correctly it's not uncommon for some styling to work in situations where you might have thought you needed to add in some media queries.

 

2.It might be worth considering giving Bootstrap a try, you can learn a lot by using it as you'll see the end result and the css involved in making that work. I did this personally when I first started learning CSS - everything was always weirdly positioned until I started using Bootstrap. By gaining an understand of what they did over time it improved my understanding of CSS tones & it's good to have on your CV.