Рубрики

Как изменить цвет Hamburger Toggler в Bootstrap?

Цвет переключателя гамбургера можно изменить в Bootstrap 4, используя 2 метода:

Метод 1: Использование встроенных классов цвета

Цвет переключателя гамбургера контролируется двумя встроенными классами, используемыми для изменения цвета текста на панели навигации:

  • .navbar-light: Этот класс используется для установки темного цвета текста панели навигации. Это изменит значок переключателя, чтобы иметь темные линии.
  • .navbar-dark: Этот класс используется, чтобы установить цвет текста панели навигации на свет. Это изменит значок переключателя, чтобы иметь белые линии.

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>

      How to change Hamburger Toggler color in Bootstrap ?

  </title>

  

    <! - Включить Bootstrap CSS ->

    <link rel="stylesheet"

          href=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

  

<body>

    <nav class="navbar navbar-light bg-lignt">

        <a href="/" class="navbar-brand">

          Light Toggler

      </a>

        <button class="navbar-toggler ml-auto" 

                type="button" 

                data-toggle="collapse"

                data-target="#nav1">

            <span class="navbar-toggler-icon my-toggler">

          </span>

        </button>

        <div class="navbar-collapse collapse" id="nav1">

            <ul class="navbar-nav mx-auto">

                <li class="nav-item">

                    <a class="nav-link"

                       href="#">Link 1</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link"

                       href="#">Link 2</a>

                </li>

            </ul>

        </div>

    </nav>

    <nav class="navbar navbar-dark bg-dark">

        <a href="/" class="navbar-brand">

          Dark Toggler

      </a>

        <button class="navbar-toggler ml-auto" 

                type="button"

                data-toggle="collapse" 

                data-target="#nav2">

            <span class="navbar-toggler-icon">

          </span>

        </button>

        <div class="navbar-collapse collapse" 

             id="nav2">

            <ul class="navbar-nav mx-auto">

                <li class="nav-item">

                    <a class="nav-link"

                       href="#">Link 1</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" 

                       href="#">Link 2</a>

                </li>

            </ul>

        </div>

    </nav>

  

    <div class="container">

        <h1 style="color: green">

          GeeksforGeeks

      </h1>

        <b>How to change Hamburger Toggler

          color in Bootstrap ?</b>

        <p>The above togglers use the default 

          color classes available for toggler.</p>

    </div>

  

    <script src=

"https://code.jquery.com/jquery-3.2.1.slim.min.js">

  </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">

  </script>

    <script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">

  </script>

</body>

  

</html>

Выход:

Способ 2. Создание пользовательского класса для переключателя

Bootstrap использует изображение SVG для представления переключателя. Новые данные изображения могут быть созданы с измененными цветами на линиях внутри значка. Свойство обводки внутри данных изображения используется для представления цвета в значениях RGB. Это значение изменяется до требуемого цвета.

Этот новый значок используется в классе .navbar-toggler-icon с background-image, так что встроенный значок заменяется этим новым значком переключателя.

/* Change the color in the stroke property of the image data */
.custom-toggler .navbar-toggler-icon {
background-image: url(“data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 128, 0, 0.8)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”);
}

Цвет границы переключателя устанавливается путем указания свойства border-color с требуемым цветом.

/* Set the border color to the desired color */
.custom-toggler.navbar-toggler {

    border-color: lightgreen;

}

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>How to change Hamburger

      Toggler color in Bootstrap ?</title>

  

    <! - Включить Bootstrap CSS ->

    <link rel="stylesheet"

          href=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <style>

        /* Set the border color */

          

        .custom-toggler.navbar-toggler {

            border-color: lightgreen;

        }

        /* Setting the stroke to green using rgb values (0, 128, 0) */

          

        .custom-toggler .navbar-toggler-icon {

            background-image: url(

"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 128, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

        }

    </style>

</head>

  

<body>

    <nav class="navbar navbar-dark bg-dark">

        <a href="/" class="navbar-brand">Custom Toggler</a>

        <button class="navbar-toggler ml-auto custom-toggler" 

                type="button" 

                data-toggle="collapse" 

                data-target="#nav3">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="navbar-collapse collapse" id="nav3">

            <ul class="navbar-nav mx-auto">

                <li class="nav-item">

                    <a class="nav-link" href="#">Link 1</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Link 2</a>

                </li>

            </ul>

        </div>

    </nav>

  

    <div class="container">

        <h1 style="color: green">GeeksforGeeks</h1>

        <b>How to change Hamburger Toggler color in Bootstrap ?</b>

        <p>The above togglers use the a custom classe for the toggler.</p>

    </div>

  

    <script src=

"https://code.jquery.com/jquery-3.2.1.slim.min.js">

  </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">

  </script>

    <script src=

 "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">

  </script>

</body>

  

</html>

Выход:

Рекомендуемые посты:

Как изменить цвет Hamburger Toggler в Bootstrap?

0.00 (0%) 0 votes