Hello. Can you please tell me if I can freely set styles for the bootstrap menu?

<!DOCTYPE HTML> <html lang="en-US"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css"> <title>Zont-SPB</title> <meta charset="UTF-8"> <head> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div id="logo"> <a href="index.html"> <img src="logo1.png" alt="" /> </a> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div id="contacts"> <span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail: <p> <span style="font-size: 16px"; class="glyphicon glyphicon-phone"></span>Телефон: </p> </div> </div> </div> <div class="navbar "> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" 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> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="#">Главная</a> </li> <li> <a href="#">Демо-доступ</a> </li> <li> <a href="catalog.html">Каталог</a> </li> <li> <a href="contact.html">Контакты</a> </li> </ul> </div> </div> </div> </body> </html>

I need the final result to be the same as on the screenshot: enter image description here

And if it's not difficult for you, maybe you could suggest the necessary styles, and + style to change the color of the link in the main menu when you hover over it. Thanks in advance, good luck to all.

    1 answer 1

    First, you have the <head> open and not closed, also the <body> , or rather </body> , you only have a closing one, you need to convert it to this format:

     <!DOCTYPE HTML> <html lang="en-US"> <head> <!--Вот тут открыли--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css"> title>Zont-SPB</title> <meta charset="UTF-8"> </head> <!--Вот тут закрыли--> <body> <!--Вот тут открыли "тело" кода-->

    Next, here is a sample CSS file for you:

     .navbar-collapse { background: linear-gradient(to bottom, #a5a5a5, #000); border-radius: 10px } .navbar-nav>li>a { color: white; } .navbar-nav>li>a:hover { color: green; } .navbar-nav>li { border-right: 1px solid gray; }

    To change the color of the link when hovering - change the color in .navbar-nav>li>a:hover (for example, I set it green).
    Here is an example of what happens.