Welcome Guest. Please Login or Register  
Client Area  |  Softaculous Cloud  |  Calendar  |  Quick Links  |  
   


You are here: Index > SitePad Website Builder > General Support > Topic : Header: Can't get image and menu aligned on mobile



Threaded Mode | Print  

 Header: Can't get image and menu aligned on mobile (6 Replies, Read 4106 times)
Greg9504
Posted on # December 10, 2020, 3:55 pm
Group: Member
Post Group: Newbie
Posts: 13
Status:
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!
IP: --   

Header: Can't get image and menu aligned on mobile
Greg9504
Posted on # December 10, 2020, 3:55 pm | Post: 1
Group: Member
Post Group: Newbie
Posts: 13
Status:
And now the screenshots because for some reason the forum software decided not to retain them...
IP: --   

Header: Can't get image and menu aligned on mobile
Greg9504
Posted on # December 10, 2020, 3:59 pm | Post: 2
Group: Member
Post Group: Newbie
Posts: 13
Status:
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...
IP: --   

Header: Can't get image and menu aligned on mobile
Greg9504
Posted on # December 10, 2020, 11:38 pm | Post: 3
Group: Member
Post Group: Newbie
Posts: 13
Status:
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.
IP: --   

Header: Can't get image and menu aligned on mobile
MicroDrie
Posted on # December 11, 2020, 10:09 pm | Post: 4
Group: Member
Post Group: Working Member
Posts: 175
Status:
Good job!
IP: --   

Header: Can't get image and menu aligned on mobile
aakash_softac
Posted on # December 12, 2020, 1:54 pm | Post: 5
Group: Member
Post Group: Super Member
Posts: 544
Status:
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
IP: --   

Header: Can't get image and menu aligned on mobile
Greg9504
Posted on # December 12, 2020, 7:57 pm | Post: 6
Group: Member
Post Group: Newbie
Posts: 13
Status:
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.
IP: --   

« Previous    Next »

Threaded Mode | Print  



Jump To :


Users viewing this topic
1 guests, 0 users.


All times are GMT. The time now is April 23, 2024, 4:59 pm.

  Powered By AEF 1.0.8 © 2007-2008 Electron Inc.Queries: 11  |  Page Created In:0.034