How do I create responsive navigation using HTML/CSS?

Question

I use a boostrap template (Dreamweaver) to create my websites. I want to edit the navigation menu by removing the border from the menu icon and change the position of the links. How can I achieve this?

Example: https://imgur.com/a/C2iJpw2

Menu Border: https://imgur.com/a/92gH934

Nav Links: https://imgur.com/a/d7SoidG

 @charset "utf-8"; html { position: relative; min-height: 100%; } body { margin-bottom: 60px; /* Margin bottom by footer height */ padding: 0; font-family: 'Montserrat', sans-serif; text-transform: uppercase; color: #FFFFFF !important; background: #000000; } .logo { width: 100px; height: 25px; margin-top: 10px; } .navbar { padding: 10px; background-color: #151515; border-radius: 0px; border-color: #1a1919; } li { margin-right: 10px; } a { color: #FFFFFF !important; } a:hover { color: #5e5e5e !important; }

 <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a href="index.html"> <img class="logo" alt="logo" src="img/Logo White.png"> </a> </div> <div class="collapse navbar-collapse" id="defaultNavbar1"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="work.html">WORK</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div> </div> </nav>

Answer 1

li {
    list-style: none; /* removes the bubble */
    text-align: center; /* centers the text */
    margin-left: #; /*offsets the bubble placement a bit due to the li tag */
}

Personally, I use an individual div tag for list items and create the list myself for more manuverability; for instance, text-align: center; wouldn't need an offset.

For the button: Setting a seperate class on the button is not needed but can be effective for simplicities sake and then add

border: none; /*removes the border*/

Answer 2

For removing bubble from the menu list item you can use list-style: none; in the list.
For positioning the list menu item to the center you can use text-align: center; in the list also.
For removing the border from the menu icon you can use text-decoration: none; in the anchor.

 @charset "utf-8"; html { position: relative; min-height: 100%; } body { margin-bottom: 60px; /* Margin bottom by footer height */ padding: 0; font-family: 'Montserrat', sans-serif; text-transform: uppercase; color: #FFFFFF !important; background: #000000; } .logo { width: 100px; height: 25px; margin-top: 10px; } .navbar { padding: 10px; background-color: #151515; border-radius: 0px; border-color: #1a1919; } li { margin-right: 10px; list-style: none; /* removes the bubble */ text-align: center; /* centers the text */ } a { color: #FFFFFF !important; text-decoration: none; } a:hover { color: #5e5e5e !important; }

  <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a href="index.html"> <img class="logo" alt="logo" src="img/Logo White.png"> </a> </div> <div class="collapse navbar-collapse" id="defaultNavbar1"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="work.html">WORK</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div> </div> </nav>

How do I create responsive navigation using HTML/CSS?

Question

2 answers

solution1
0 2019-06-17 00:02:07

solution2
0 2019-06-17 03:41:03

How do I create responsive navigation using HTML/CSS?

Question

2 answers

solution1 0 2019-06-17 00:02:07

solution2 0 2019-06-17 03:41:03

solution1
0 2019-06-17 00:02:07

solution2
0 2019-06-17 03:41:03