html - Center Navbar Toggle Button (Bootstrap 3) -
i reason cannot navbar toggle button center. there multiple threads relating issue, reason can't it. direct useful!
i have following css dedicated towards button:
.navbar-toggle { width: 100%; float: none; margin: auto; border-width:0; border-radius:0; } .navbar-header { text-align:center; } and following html dedicated button when screen small:
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"> toggle navigation </span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> here full code:
<!doctype html> <html lang="en"> <head> <title>website title</title> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://fonts.googleapis.com/css?family=petit+formal+script" rel="stylesheet"> <style> img { display: block; margin: 0 auto; } h1 { font-family: 'lora', serif; color:#453d51; text-align:center; font-size:40px; } .subtitle { font-family: 'petit formal script', cursive; font-size:60px; text-align:center; letter-spacing:2px; } .navbar-default { background-color: white; font-family: 'lora', serif; font-size: 20px; padding-left:2px; padding-right: 2px; } .navbar-toggle { width: 100%; float: none; margin: auto; border-width:0; border-radius:0; } .navbar-header { text-align:center; } </style> </head> <body> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class=container> <img src="c:\users\mmosl\onedrive\documents\portfolio\logo\logo.png" margin="0" href="index.html" width=25% height=25%> <h1> portfolio </h1> <p class=subtitle> mrs. slater </p> </div> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"> toggle navigation </span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </nav> </div> </body> </html> i'd provide website not live. here screenshot: https://drive.google.com/open?id=0b_6fmxn_tvcros03emffemvlvek
Comments
Post a Comment