Alex G.

- ENTRY #3 -

How to build a navigation bar on top of an image using HTML and CSS.

Step #1: Create the HTML for your navbar inside your image. IMPORTANT: Make sure that your most outer div is your image. Then inside of that div, create another div called container. Then inside that container div, put your navbar code.

Example:

Notice how all divs are listed as class instead of id. This is because these values will be used more than once in our CSS section. Make sure to use </div> three times at the end of your code for each div created.

Step #2: Create the CSS for your image and navbar. First we will do the CSS for your image.

Example:

It is suggested that you put your background image source inside the CSS section instead of the HTML section. The last four lines of code set the width to 100% without stretching the image to fit the screen, and instead crops it based on the height you set it at. I set the height at 600px but you should change it depending on the size of your selected image.

Next we will do the CSS for your container div.

Example:

This is fairly simple code. position: absolute means that the image will stay it its place. margin: 20px creates 20px space between its surrounding divs. You can change the amount of margin you want in your own website. Width should always be set to auto.

Lastly we will do the CSS for the navigation bar.

Example:

Make sure to put overflow: hidden in your CSS so your background color (where the text sits on top of) appears. Background color can always be changed based on your liking. Float can be changed depending on whether you want the navigation bar to appear on the right side or left side of the screen (I have it to the left; suggested). Everything else can be changed based on how you want your website to look.

Additional: Add a hover aspect to your navbar.

Example:

Adding a hover aspect to your navigation bar changes the color of your text and background color when you hover over it. Colors, as always, can be changed based on your liking. Other lines of code can be added in this section as well, such as text-decoration.

Example of Finished Product:

Direct link to source code: https://www.w3schools.com/howto/howto_css_navbar_image.asp

Visit https://www.w3schools.com/ for more website design ideas and creations.

- ENTRY #2 -

How to add an icon bar in place for a normal navbar using HTML and CSS (horizontally and vertically).

Step #1: Create/open a website with basic HTML and CSS skeleton. IMPORTANT: Add given link to the site with the icons (see below). You can put this link inside your body section, right above the HTML for your icon bar. Or inside the head section, after <title> and before <style>.

*LINK* Copy and paste into your code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step #2: Add HTML for your icon bar inside your body section.

Example:

Explanation: <a class="active" href="#"><i class="fa fa-home"></i></a> is not necessary for your website but essentially lets the web know which page of your website you are currently on. <li></li> should be used here because we are using icons instead of text.

Step #3: Add CSS for your icon bar (VERTICAL)

Example:

Explanation: In order to create a vertical icon bar, you should set the width to a specific number of pixels instead of width: 100%;. This CSS is fairly simple, .icon-bar a:hover is not necessary for a working icon bar but essentially highlights the icon link when you hover over it with your cursor. .active is also not necessary as said previously but just highlights the icon based on which page you are on. All colors, font sizes and padding can be adjusted depending on your liking but these are good suggestions. transition can be put in your CSS and essentially just changes the time it takes for an icon to be fully highlighted when hovered over.

Example of Finished Product (VERTICAL):

Step #4: Add CSS for your icon bar (HORIZONTAL)

Example:

Explanation: In order to have a horizontal icon bar the width must be 100% as seen in the image. Overflow: auto; ensures that all values of your icon bar (each link) will stay on the same line. I tested several different settings for my icon bar such as display: flex; and justify-content: center;, however, no method worked as well as float: left; / text-align: center; and then adding a width for each separate value (example: width: 20%;). Make sure to add padding for each icon, the 0 after 12px is essential is your icon bar design and goes hand-in-hand with overflow: auto; so that your values stay on the same line. As always all settings like padding, font size, text decorations, and colors can be set to your liking. And transition, hover and active are always optional.

Example of Finished Product (VERTICAL):

Feel free to visit https://www.w3schools.com/ for more information on how to build an icon bar and other ideas for everything code.

Direct link to source: https://www.w3schools.com/howto/howto_css_icon_bar.asp

- ENTRY #1 -

How to correctly incorporate a search bar into your navigation bar using HTML and CSS.

Step #1: Create/open website with basic HTML and CSS skeleton. Create a basic HTML navigation bar in your body section. (easy)

Example:

Step #2: Add search bar HTML into navigation bar. (easy)

Include this line (suggested) <input type="text" placeholder="Search..."> into your list of links.

Your code should now look like this:

Step #3: Add CSS for your navigation bar, links, and search bar inside the style section inside the head section. (slightly complicated)

First, create the CSS for your base navigation bar (what the text will live on):

I suggest adding a set width and height for your navbar when you are inserting it into a website but it is not always necessary. All factors listed (width, height, background color) can be set to your liking, although I suggest width at 100%.

Next, create the CSS for your links inside the navbar:

text-transform: uppercase; is an optional factor; basically transforming your text into uppercase letters. You can set your own text color, padding, margin, font, and font size, but make sure there is a good amount of padding between links.

Finally, create the CSS for your search bar:

The white line after none; is my cursor, make sure to ignore that and don't put anything there. Once again you can set your font size, font, margin, and padding to your liking and you should come out with a fully complete navigation bar with a search bar.

Your complete navigation bar with a custom search bar should look similar to mine depending on the particular style that you chose. Now, you should be able to type inside your search bar and the bar will move along as you type.

Credits to W3Schools

Other Aspects for Navbar:

.navbar a:hover - changes background color of the link when you hover over it (CSS only)

.navbar a.active - shows which link you are on inside the navbar by highlighting the area around it in a different color (CSS and HTML)

Page updated

Report abuse