Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Center Simple Nav on Mobile

Recommended Posts

jmad

I've spent considerable time looking for the correct class to center Simple Nav on mobile.  I see the pl-area-wrap, .section-simple_nav .pl-section-pad and a class called "right" and alignright which appears to be because I have the menu right aligned on desktop.  

 

I see various classes assigned to divs and then other styles that don't seem to relate.

 

Anyway, what class do I target to center on mobile?

Share this post


Link to post
Share on other sites
Danny

HI,

 

I have just added the SimpleNav section to my template and then resized the browser and the navigation goes central when viewed on that sized screen. If this is not happening for you then you likely have custom CSS effecting it.

If you can provide a link to the site in question we can take a closer look.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny,

 

Just want to make sure we are on the same page.  If I set the SimpleNav to "center" in the options it works fine.  I have it set to "right" in the settings but want to override to center on mobile.  

Share this post


Link to post
Share on other sites
Danny

My SimpleNav was aligned to right, when I reduce the browser window, the menu is centered. So I am going to need a link to the site, so I can see it for myself.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny,

 

Your response doesn't really make sense with how SimpleNav usually works.  I've never seen SimpleNave automatically center on smaller browser size or mobile devices.  Is there a setting somewhere in DMS that makes that happen?

 

I don't want to post it in the forum.  I emailed it to hello@pagelines

Share this post


Link to post
Share on other sites
greenfly

Hi jmad - my simple nav is performing in the same way. Aligning to and then centering on my mobile site. 

 

Have you tried any custom code to override this? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jmad

I don't have any custom code added to the site (removed it all just for this reason).  Did you take a look at the site?  I've never seen SimpleNav perform to where it automatically centers on mobile.  

 

I've added SimpleNav to three sites to test this.  The site in question hosted with Flywheel.  Another site I had as a test area on WPEngine.  And a completely fresh install of DMS on WPE.  SimpleNav performs just as I explained on all sites.  I have no child theme on any of these particular installs and on two no custom CSS.

 

I set SimpleNav to rightalign and it does but doesn't change for mobile.  

Share this post


Link to post
Share on other sites
Danny

Danny,

 

Your response doesn't really make sense with how SimpleNav usually works.  I've never seen SimpleNave automatically center on smaller browser size or mobile devices.  Is there a setting somewhere in DMS that makes that happen?

 

I don't want to post it in the forum.  I emailed it to hello@pagelines

 

Not sure how my reply doesn't make sense, SimpleNav has always as far as I am aware worked in the way I described. If the menu were not to change it alignment on smaller screen sizes then it wouldn't be responsive.

 

Can you provide a link to the site in question.

 

Desktop view ~ aligned left - https://cloudup.com/cK54ZrmdN22

Desktop view ~ reduced width - https://cloudup.com/cytLVnsludL

 

Desktop view ~ aligned right - https://cloudup.com/ck5ydN1tMM4

Desktop view ~ reduced width - https://cloudup.com/ca8YtfZYrBr


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny

 

As I mentioned it a previous post.  I emailed the website and login to access the website to hello@pagelines.com.  I did that yesterday...I need to get my custom CSS back into the site so I can work on it with the client.  

 

Simon_P Maybe it would be good if Pagelines had demos of it's sections some where so users could know the expected behavior.  I've never once seen SimpleNav aligned right or left automatically center on smaller devices.

Share this post


Link to post
Share on other sites
GetMeWebDesign

jmad hate to butt in, but it has always done so. I have never seen the issue you have


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
jmad

GetMeWebDesign  I don't mind at all, I just want the issue resolved.  I'll private message you the site.  I only have 3 pages on the menu so I wonder if that is causing an issue.  

Share this post


Link to post
Share on other sites
jmad

I'm using solid hosting services, installing most recent DMS via the WP installer not FTP.  Have only DMS Developer Tools, DMS Professional Tools, and Pagelines Updater installed as plugins.  

 

Okay, if I add more menu items to the menu then a right aligned menu will center when the menu items are near to the left.

 

This takes me back to the original question of what class do I target to have the menu center @media (max-width: 768px)?  Also, I have a media box and text box in the header at 768px on desktop the text box is pushed to the next row but it should have plenty of room.

Share this post


Link to post
Share on other sites

×