mobile logo fullwidth.. how to.

amir ali
asked 9 years ago

i would like to move logo over navigation bar in mobile and tablet responsive version, how to?

i photoshopped an example (see attachment) – http://content.screencast.com/users/zelatech/folders/Default/media/10304b30-a265-4325-80f8-bc64ad925682/foto.PNG

1 Answers

DominicStaff
answered 9 years ago

Hi,
To resolve this issue, you can open the header.php file. Find the line 34.
Replace the following code:
<div class="row hidden-xs hidden-sm">

With new code:
<div class="row">

And line 65.
Replace the following code:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="site-brand navbar-brand visible-xs visible-sm">

With new code:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="site-brand navbar-brand hidden-xs hidden-sm visible-xs visible-sm">

Finally, add the following code the style.css file:

@media (max-width: 991px) {
.site-header .site-logo {
    text-align: center;
    display: block;
  }
}

In case you don’t like change the code in the php file, you can use the following css to resolve this issue.

@media (max-width: 991px) {
.site-header .site-logo {
    text-align: center;
    display: block;
  }
.site-navigation .site-brand img {
    display: none;
  }
.row { 
    display: block !important;
  }
}

Hope this helps !