In Mobile Menu is shown in the middle


#1

Hi,

How do i move Menu button to the top of the page or next to top of logo.
Currently Menu is shown in the middle of the page

Below is the mobile version screen shot.
https://drive.google.com/open?id=0Bx50kT4bx-fid3RuZ0FPc2RjeUk
https://drive.google.com/open?id=0Bx50kT4bx-fiZXpocGRBNldNU28
https://drive.google.com/open?id=0Bx50kT4bx-fieXdNV1A4Nk1BYjg


#2

Hi,

You can move it more to top ( more closer to logo ) with this Custom CSS:

@media only screen and (max-width: 499px) {
.main-navigation {
    margin-top: 0 !important;
    padding-top: 0 !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


#3

Hi,

It doesn’t help.
Below is the link:
https://drive.google.com/open?id=0Bx50kT4bx-fiQzdYWjB6ajdybEk

Complete CSS script changes are
.sidebar-toggle {
display: none !important;
}

.overlay {
background: transparent;
}

.welcome .container {
background: #292c32 url(‘pattern.png’);
opacity: .7;
}

@media only screen and (max-width: 499px) {
.welcome {
display: block;
text-align: center;
}

.main-navigation {
	margin-top: 0;
	padding: 0;
}

}

.overlay {
display: none;
}

@media only screen and (max-width: 499px) {
.main-navigation {
margin-top: 0 !important;
padding-top: 0 !important;
}
}


#4

Hi,

What is not good? You don’t want it more closer to logo? after the logo is not possible on that small screen-size, so more closer to logo you can, as you specified.

Best Regards,
Csaba


#5

I need menu next to logo. Currently it is down from the logo.


#6

Hi,

This was a bit harder to achieve and maybe it will not work correctly on smaller devices, but it can be done with this Custom CSS:

@media only screen and (max-width: 499px) {
.site-branding, .main-navigation {
    width: 50% !important;
}

.main-navigation {
    text-align: right !important;
}
}

If the menu icon will still go below the logo, then you will need to decrease the 50% width to 40 or 30% ( this can make your logo to appear a bit smaller ).

Best Regards,
Csaba


#7

Thanks it works great…:slight_smile:


#8

Now one last issue is , photo in welcome box needs to be moved to the Left side. It is currently in center now .
https://drive.google.com/open?id=0Bx50kT4bx-fiX1hTdEtUQXhqN0U

The photo in welcome box and background both are overlaying. Issue is with mobileview only.


#9

Hi,

Please try this Custom CSS and let me know how it works:

@media only screen and (max-width: 767px){
.wcm-photo {
    float: left !important;
}
}

Best Regards,
Csaba


#10

Thanks, It worked but the welcome box moved on top now.how do i lower the welcome box to center/middle of the page
https://drive.google.com/open?id=0Bx50kT4bx-fiRW0wWGZTOHFWZW8


#11

Hi,

Please try this Custom CSS and let me know how it works:

@media only screen and (max-width: 499px) {
.welcome {
    margin-top: 180px !important;
}
}

Best Regards,
Csaba


#12

It works great thanks…!


#13

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba