Bootstrap Custom Navigation page-1
Step 1 : Remove the Extra UL or Menu and Form from html .navbar
.
Step 2 : Insert Logo image inside .navbar-brand
Step 3: For adjusting .navbar height with logo we should make change on .navbar-brand / .navbar-brand-custom (custom) { height
: auto; padding: 0 15px;}
Step 4: For changing background-color
we just select .navbar / .navbar-custom (custom). We can change border-radius and border.
and we can remove also margin-bottom.
Step 5: we can add menu list on li
For Adjusting ul with logo.
Step 6: select .navbar-nav/ .navbar-nav-custom (custom) and put
{margin-top:}
Step: 7: For adding extra width of buttons we can select .navbar-default
.navbar-nav > li > a / .navbar-default
.navbar-nav-custom > li > a (custom)
and change the css code {
padding-left: ;
padding-right: ;
background-color: ;
color:
;
font-weight:
;
font-size:
;
margin-right: ;
border-radius: ;
}
We can chage any text design with this selector with background-color.
step 8: for changing hover background color and font color this is the
selector .navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus /.navbar-default
.navbar-nav-custom > li > a:hover, .navbar-default .navbar-nav-custom
> li > a:focus {
background-color: ;
color: ;
}
@media only screen and (max-width: 767px){
Step 9: For sliding Mobile menu as a above layer
this is the selector and important property for this task:
.collapse
/ .collapse-custom{
position:
absolute;
z-index: 999;
width: 100%;
background:
rgba(165,42,42,0.8);
}
For adjusting mobile menu button
you should select button class .navbar-toggle / .navbar-toggle-custom{
margin-top: ;
}
}
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন