Mobile Header: Nav and logo inline

risamazing
(@risamazing)

9 years, 10 months ago

My site: RBIfixit.com

I would like to make the nav and logo display on the same line as one and other when scaled down to a mobile size.

I have run into issues with the navigation being able to collapse or not while attempting to achieve this. Also the other issue that I was having is that the nav, once moved inline with the logo, displays far higher than the logo itself, resulting in a very awkward look. Because of these issues, I have restored the nav to the closest working state.

Please help! I appreciate any assistance.

Viewing 5 replies - 1 through 5 (of 5 total)

Kharis Sulistiyono
(@kharisblank)

9 years, 10 months ago
Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?
```
@media only screen and (max-width:767px){

  .header-wrap .container{
    text-align: left;
    position: relative;
  }

  .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
    margin-top: -50px;
  }  

  .site-header .col-md-4.col-sm-8.col-xs-12 a img{
    max-width: 70%;
  }

}
```
Regards,
Kharis
Thread Starter risamazing
(@risamazing)

9 years, 10 months ago

Works great on iPhone 6, but on my dad’s smaller android phone there are small issues.

-Logo and button do not display inline (perhaps the logo is too big, can I make it responsive somehow? I’ll try and tweak the logo so that it displays at 75% width on smaller screens)

-Menu covered only on home page by photo slider…this one I have no clue how to fix

Thank you for your help 🙂
Kharis Sulistiyono
(@kharisblank)

9 years, 10 months ago
Hello there,

Try to apply the following CSS code:
```
@media only screen and (max-width:767px){

  .header-wrap .container{
    text-align: left;
    position: relative;
  }

  .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
    margin-top: -50px;
  }  

  .site-header .col-md-4.col-sm-8.col-xs-12 a img{
    max-width: 75% !important;
  }

}
```
Clear your web browser’s cache before reloading your site.

Regards,
Kharis
Thread Starter risamazing
(@risamazing)

9 years, 10 months ago

They now display inline on the phone! But the opened navigation still is covered by the rotating photo header on the home page on the stock android mobile browser…

Is there a way to make the expanded nav always display on top?

Kharis Sulistiyono
(@kharisblank)

9 years, 10 months ago

Hello there,

Could you confirm if your mobile web browser is the latest version?

Regards,
Kharis

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Mobile Header: Nav and logo inline’ is closed to new replies.

Tags