How to Create a Transparent Navigation Bar for Webpage

How to create a transparent navigation bar??? If you are using bootstrap you can add below commands in the header class.

But here i’m using another easy codes for making it simple and looking more good. We should have a background image in which we are going to add our navigation bar and the body of our webpage. Please follow my steps..

HTML for the Webpage

Add menus such as home,blog add contact, i’m using the class navigation_bar for this. Add social, art and food for the blog menu which would drop down on pointing cursor on the blog menu. I added a class blog_menu for this, and a class blog_content to add the contents inside the blog. Here is the full html code which i used just copy and use.

CSS for the Webpage

Link the css to the html using the code

which i had already given in the HTML above.

Here i’m using the font “gill-sans-mt-ultra” for my Webpage, you could use it according to your wish or you could use it by default. In the body add background image, give height and width to 100% and make background-size to cover and set margin 0 auto. I,m using my background image, background.jpg

background.jpg
background.jpg

Navigation Bar

Give navigation_bar height,width and display as block also give text decoration, list-style as none, give background-color for the navigation_bar. And for making it transparent use the code

Display the menu in the navigation bar as inline-block, give list-style and text decoration as none. Also give the color, size and padding for the text.

Blog Menu

Display blog_menu in inline-block and make position to relative.

Blog Content

Also give position absolute and display none to the blog_content. And for the text inside the blog_content give text align to left and text decoration to none also display it as block. Also display blog_content as inline block for the blog_menu hover. Add hover effect to the font as changing the background color and the font color with an acceptable transition time to look it good. No need to worry i’m providing the full CSS code for it below check it and try.

Final Result

If you had followed my instructions it would look some how like this.

final look

Thank you! Leave your suggestions and doubts, have great day all…

Leave a Reply