Rocked Mobile Optimized Menu

Hi,

What is the code to get the menu to be sitting at the right of the logo in a mobile optimised website? It sits to the right for an Ipad. But anything that is phone sized it sits underneath the logo (And not to the right).

Thanks.

Hi again,

I’ve managed to get the logo and menu to be inline, however, my logo is appearing extremely small in the portrait view. How do I increase its size?

My website is www.peakemployment.net

Hi,

You can make the logo larger on smartphone portrait mode larger with this Custom CSS:

.site-branding.col-xs-3 {
    width: 50% !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi,

That didn’t seem to work the logo appears very small.

Also now there is a large distance between the logo, menu and the header image.

Hi,

Please re-activate Rocked Theme, then let me know, now you have an other theme active, this way I can’t check.

Best Regards,
Csaba

Hi,

I’ve reinstalled my Rocked theme with no adjustments.

  1. What’s the correct css to get my logo and menu like yours on a mobile device:
    Athemes

  2. If I can get my logo and menu like yours. Then what’s the correct way to make sure the the logo and menu are (in-line) with no space from the header image?
    Peak Menu

Hi,

On our website the mobile menu icon is an image, but on your site it’s an icon, but you can use the same icon if you would like to with this Custom CSS:

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: 'menu' !important;
    color: transparent !important;
    background: url(//athemes.com/wp-content/uploads/menu-dark.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
}

With the logo I don’t understand what is the issue, also I can’t see that white space.

Best Regards,
Csaba

Hi Csaba,

I meant that I want the menu and logo to be inline like yours when someone view my website on their phone.

I have attached an image of what the website currently looks like and what needs changing.

  1. How do I move the logo to the right to be inline with the image below.
  2. The menu needs to be lowered to be inline centrally with the logo.

Movement of images

Hi,

You can make the logo inline with content and move the menu button down with this Custom CSS:

.header-wrap .btn-menu {
    margin-top: -15px !important;
}

@media only screen and (max-width: 768px) {
.site-logo {
    margin-left: 15px !important;
}
}

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

Thanks for the help!

It worked well on my Samsung S7 phone.

However, on an iPhone 6 or below/S5 or below it still appears the same like below:

How do we fix this?

Hi,

Do you want to make the menu inline on iPhone, so the menu icon at right and the logo at left?

Best Regards,
Csaba