Bootstrap Snippet Bootstrap Navbar Menu using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar_menu fixed-top" >
            <a href="" class="logo"> <strong>L</strong>ogo </a>
            <ul class="arama">
                <li class="input-group">
                    <input type="search" name="ara" class="form-control" placeholder="Mağaza'da Ara">
                    <button class="btn"><span class="material-icons">search</span></button>
                </li>
            </ul>
        </nav>
        <button class="btn btn-secondary" style="border-radius: 50%; position: absolute; z-index: 1030; left: 48%; right: 50%; top: 82%;">
            <span class="material-icons" style="padding: auto; color: white;">add</span>
        </button>
        <nav class="navbar_bottom_menu fixed-bottom">
          <div class="bottom_menu">
            <ul class="left_menu">
                <a href="#"> <li>
                <i class="glyphicon glyphicon-home text-white"></i> Anasayfa
                </li></a>
                <a href="#"> <li>
                Hakkımda
                </li></a>
                <a href="#"><li>
                Topluluk
                </li></a>
            </ul>
            <ul class="orta_menu">  
                <a href="#"><li>
                    +
                </li></a>
            </ul>
            <ul class="right_menu">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 .navbar_menu{width: 100%; background: black; opacity: 0.9; height: 10%; padding: 13px 10% 0 2%;}
 .navbar_bottom_menu{width: 100%; background: gray; opacity: 1.0; height: 10vh;}
 /* Logo Tasarımı */
.logo{ color: white; text-decoration: none; font-size: 20px; float: left; padding-top: 3px;}
.logo:hover{ color: white; text-decoration: none; font-size: 24px; font-style: italic; }
 .arama{ width: 85%; display: block; float: left; position: absolute; left: 13%; right: 2%;}
 .input-group span{ font-size: 19px;  color: white; }
 .bottom_menu{ display: inline; list-style: none; padding: 0; margin:0%; }
 /* Bottom Menu Left Menu Tasarımı */
 .left_menu{ list-style: none; float: left; margin-left: 5%; width: 30%;}
 .left_menu li{float: left; margin:1px 0px 5px 0px; padding: 8%; color: white; text-align:justify;}
 .orta_menu{ list-style: none; float: left; margin-right:3%; margin-left: 3%; width: 20%;}
 .orta_menu li{width:50%; float: left; margin:1px 5px ; padding: 8%  0px; color: white; text-align:center;}
 .right_menu{ list-style: none; float: left; margin-right: 9%; width: 25%;}
 .right_menu li{ float:left; margin:1px 0px 5px 0px; padding:8%; color:white; text-align:justify;}
  
 /* Bottom_Menu:hover; */
 .bottom_menu a:hover li{ border-radius: 45%; background: white; opacity: 0.8; color: black; transition: 2s; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Navbar Menu "
Bootstrap 4.1.1 Snippet by xSimona

Related: See More

Questions / Comments:

"Bootstrap Navbar Menu " Bootstrap 4.1.1 Snippet by xSimona

Related: See More

Questions / Comments:

"Bootstrap Navbar Menu "
Bootstrap 4.1.1 Snippet by xSimona