Move menu icon to the right?

Hi i want to be able to move the menu icon to the right instead of the center in mobile view? please help =)
center to right

Hello there,

To accomplish it, you need to add the following CSS snippet into your site’s additional CSS option under Appearance > Customize > Additional CSS.


@media only screen and (max-width:767px){
        
  .header-wrap .container{
    text-align: left;
  }

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

  .header-wrap .col-md-4 {
    max-width: 90%;
    position: relative;
    z-index: 2;
  }

  .header-wrap .col-md-8 {
    margin-top: -50px;       
  }        

  #mainnav-mobi {
    top: 70px;
  }
  
}

Regards,
Kharis

Hi Kharis,
Thank you for your reply. I am really pleased with the result. It now looks fantastic on a mobile device too.

.header-wrap .col-md-8 {
margin-top: -50px;
Reduces the depth of the black background at the top. I tried increasing it to -60 or -70 but this stopped having an effect. The black border is still about twice as deep as it needs to be on my website (I realise I am not using a logo or other text that might go in this space). Is it possible to reduce it further? I am assuming it isn’t?

A point of detail,… now when I click the menu, the menu appears in the same position and so there is a small gap between the black border and the menu. In this gap a slice of the header photos is visible. This is OK but not as neat as the menu just sliding down from the black border. Is it possible to move the menu up too?

Thank you in advance.

William

Hi Kharis,

I’m using the Sydney Theme, and also want the right-menu to appear on the right on all screens, as of now on mobiles it’s on the bottom in the centre?

I have added the extra CSS that you gave another user to the additional CSS, but it’s still on the bottom centre on mobile devices?

My page is on cecilshub.dx.am for now until it goes live.

Thanks

Cecil

Hello Cecil,

It looks like site caching has been enabled and. This may stop new code addition to take effect. Try flushing it and reloading your site.

Regards,
Kharis

Hi Kharis,

I have cleared my cache, it’s still displaying the right-menu at the bottom centre on mobile view?

Thanks

Cecil

It’s displaying like this on my phone.

Pleas take a screenshot and upload it in your comment. What’s your phone’s resolution? https://www.whatismyscreenresolution.com/

Regards,
Kharis

Hi Kharis

It’s not the main navigation that I’m referring to, that appears as a hamburger menu correctly on Mobiles.

It’s my right-menu that on mobiles displays as a menu after the main content in the centre?

As per the attached image?

,

That’s normal – that’s designed that way as the main content should have enough room in smaller screen. So you want the main content 70% wide of the screen and 30% for sidebar? Or, there should be another hamburger icon that shows/hide the sidebar? Please advise.

Regards,
Kharis

1 Like

Hi Kharis,

If that’s standard and can’t be changed, fair enough?

Cecil

Do you want to accomplish this?

Regards,
Kharis

Hi Kharis,

How do I add another hamburger menu for my right-hand menu?

Thanks

Paul

Hello Paul,

Sydney only has single mobile menu. Adding extra more is really out of the scope of support service we can offer here in the forums. Ideally, you should use an extra plugin. If none helps, your final bet is to hire a WordPress coder. You could find him at upwork.com or jobs.wordpress.net.

Regards,
Kharis