No replies
aar_26
aar_26's picture
Offline
newbie
Last seen: 3 years 43 weeks ago
Timezone: GMT+5.5
Joined: 2016-02-04
Posts: 2
Points: 4

Sub - LOGO and Navigation bar separation in responsive design

How to separate LOGO and Navigation bar in two lines
I want my navigation bar immediate below my Company LOGO. keeping both in center ligned
How could I? Please help
______________________________________________________________________________
HTML Code

<div class="animsition">
<div class="full-box">
  <main>
    <div class="navbar navbar-default default" role="navigation">
      <div class="navbar-header">
        <div class="navbar-brand"><a href="index.html"><img src="#" srcset="style/images/logo.png 1x, style/images/[email protected] 2x" alt="" /></a></div>
        <div class="nav-bars-wrapper">
          <div class="nav-bars-inner">
            <div class="nav-bars" data-toggle="collapse" data-target=".navbar-collapse"><span></span></div>
          </div>
          <!-- /.nav-bars-inner --> 
        </div>
        <!-- /.nav-bars-wrapper -->
        <div class="header-other">
          <div class="btn-group pull-right text-right"> <a href="#" class="share-button btn btn-light dropdown-toggle" data-toggle="dropdown"><span></span>Share</a>
            <div class="dropdown-menu">
              <div class="goodshare-wrapper"> <a href="#" class="goodshare" data-type="fb">Share</a> <a href="#" class="goodshare" data-type="tw">Tweet</a> <a href="#" class="goodshare" data-type="pt">Pin</a> <a href="#" class="goodshare" data-type="tm">Post</a> </div>
              <!-- /.goodshare-wrapper --> 
            </div>
            <!-- /.dropdown-menu --> 
          </div>
          <!-- /.btn-group --> 
        </div>
        <!-- /.header-other --> 
      </div>
      <!-- /.navbar-header -->

_____________________________________________________

CSS

.navbar {
    z-index: 1008;
    border: 0;
    border-radius: 0;
    min-height: inherit;
    width: 100%;
    position: absolute;
    top: 65px;
    left: 0;
    margin: 0;
    background: rgba(28,28,28,0.3);
}
 
.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
 
.navbar .navbar-header {
    width: 100%;
    height: 100%;
    display: table;
    padding: 0 40px;
}
.navbar .navbar-brand {
    padding: 0;
    float: none;
    height: auto;
    position: relative;
    box-shadow: none;
    margin: 0 !important;
}
.navbar .navbar-brand,
.navbar .header-other {
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}
.navbar .header-other {
    text-align: right
}
.navbar .nav-bars-wrapper {
    position: absolute;
    top: 50px;
    left: 0;
    height: 100%;
    width: 100%;
    display: table;
    pointer-events: none;
}
.navbar .nav-bars-wrapper .nav-bars-inner {
    display: none;
    vertical-align: middle;
    pointer-events: none;
}
.navbar .navbar-collapse {
    border: 0;
    box-shadow: none;
    overflow: hidden;
}
.navbar .navbar-nav > li {
    pointer-events: all
}
 
/*-----------------------------------------------------------------------------------*/
/*	04. STICKY HEADER
/*-----------------------------------------------------------------------------------*/
.navbar.default {
    width: 100%;
    position: absolute;
}
.navbar.default-1 {
    width: 100%;
    position: absolute;
}
 
.navbar.fixed {
    position: fixed;
    margin: 0;
    width: 100%;
    background: rgba(28,28,28,0.7) !important;
}
.navbar,
.navbar .navbar-nav {
	height: 45px;
}
@media (min-width: 768px) { 	
	.navbar.fixed,
	.navbar.fixed .navbar-nav {
	    height: 45px;
	}
 
 
.nav-bars {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 32px;
    height: 32px;
    font-size: 0;
    text-indent: -9999px;
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    pointer-events: all;
}
.nav-bars:focus {
    outline: none
}
.nav-bars span {
    display: block;
    position: absolute;
    top: 16px;
    left: 2px;
    right: 2px;
    height: 3px;
    background: #f5f5f5;
}

//mod edit: [code] and [/code] tags added ~gt