Softaculous

Topic : Header: Can't get image and menu aligned on mobile

Posted By: Greg9504 on December 10, 2020, 3:55 pm

Hello,
I'm having a problem with the alignment of an image and the primary menu in a header. On desktop it works fine. On mobile the 'hamburger' icon is forced down to another row, although there is enough space to display it and the image on the same row.

See the attached screenshot, I've also attached a working example taken right from sitepad.com itself to show what I would like it to look like.

The site can be viewed here:
rideauworksDOTca/testtheme/ (I'm not allowed to post links as new user, replace DOT with .)
Thanks!

Posted By: Greg9504 on December 10, 2020, 3:55 pm | Post: 1

And now the screenshots because for some reason the forum software decided not to retain them...

Posted By: Greg9504 on December 10, 2020, 3:59 pm | Post: 2

OMG, this forum software sucks so bad... lets try this again. screenshots attached (this time renamed with lowercase .jpg, maybe it will work). Please forum moderators turn on post editing and change the allowed image formats to be more inclusive...

Posted By: Greg9504 on December 10, 2020, 11:38 pm | Post: 3

OK found the problem and the solution.
The css gets overridden on mobile so all columns, regardless of column width (the 1 to 12 setting) setting, are set to 100%.

Code
@media (max-width: 768px)

.pagelayer-row .pagelayer-col {

    margin-left: 0;

    width: 100%;

}

The solution, at least for me, is to add custom css to the ROW, edit row then chose Options, scroll down for custom css and add this:
{{element}} .pagelayer-col {
width: 50%
}
This will make each column 50% width.

Posted By: MicroDrie on December 11, 2020, 10:09 pm | Post: 4

Good job!

Posted By: aakash_softac on December 12, 2020, 1:54 pm | Post: 5

Hi,

You can also change it by accessing SitePad > Pages > All Pages > Header Page > click on Primary Menu > change the preview mode to Mobile and then change the alignment to the right.

Do let us know if you need any other information.

-----------------------
Aakash Gupta
SitePad Developer

Follow us for faster updates
Twitter: https://twitter.com/sitepad_editor
Facebook: https://facebook.com/SitePad

Posted By: Greg9504 on December 12, 2020, 7:57 pm | Post: 6

Quote From : aakash_softac December 12, 2020, 1:54 pm

Hi,

You can also change it by accessing SitePad > Pages > All Pages > Header Page > click on Primary Menu > change the preview mode to Mobile and then change the alignment to the right.

When I do that without my custom css, I get the problem I originally had. See attached screen shot.