Change the position of the elements in the header

Hi. I would like to change the position and size of some elements of the header when I see my webpage on the mobile phone.

Now, on the mobile, you can see my logo taking up the whole width of the screen and the mobile icon menu under the logo. Is it possible to make my logo half size and also put it in the upper center of the screen and put the icon menu up to the left in the same line as it is the logo?

My web is www.pameladelacolina.com

Thank you very much

Kind regards

Pablo

Hi there,

Please try to use this CSS code below:

@media only screen and (max-width: 1024px){
    .site-header .col-xs-12:nth-of-type(1){
	width: 75%;
    }
    .site-header .col-xs-12:nth-of-type(2){
	width: 25%;
    }
}

@media only screen and (max-width: 425px){
    nav#mainnav-mobi {
    	left: -130px;
    	width: auto;
    }
}

Put the code into: customize > additional CSSS.

Regards,
Awan

Thank you very much Awan! It’s pretty much what I want, but is it possible to place the icon mobile menu on the left of the screen instead of on the right?.
Thanks

Kind regards,

Pablo

Here you go:
Please replace the code in above:

.site-header .col-xs-12:nth-of-type(1) {
    width: 75%;
}

with this:

.site-header .col-xs-12:nth-of-type(1) {
    width: 75%;
    float: right;
}

Also replace this:

nav#mainnav-mobi {
    left: -130px;
    width: auto;
}

with this:

nav#mainnav-mobi {
    left: 30px;
    width: auto;
}

Then add this:

.btn-menu {
    float: none;
    margin-left: 15px;
}

It works!! Thank you so much.
Regards