Jump to content
Lexxus

Header messed up on mobile

Recommended Posts

Lexxus

Hi,

 

I have noticed that the mobile view of my site is not displaying correctly.

 

I have a blog title then language switcher and social icons all displayed in one line on the web: http://wordofmouthlabs.com

 

But on mobile the header behaves differently and site title becomes overlapped with the language switcher and social icons.. It would be nice to display first the logo + title in one line, then the switcher and icons right under.

 

I have tried tweaking the code with Browser Specific CSS plugin, but could not figure it out. :(

 

Can you advise the solution please?

Share this post


Link to post
Share on other sites
mackenzie

Are you using responsive or static layout for your site and is the mobile optimized view disabled or enabled? (Dashboard > Pagelines > Site Options > Layout Editor)


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
Lexxus

Hi Mackenzie,

 

Thanks for getting back!

 

I am using responsive layout and mobile view is enabled.

Share this post


Link to post
Share on other sites
James B

Hi there,

 

I would imagine this is happening as the selector isn't responsive so the menu doesn't resize when it shrinks and moves along with the mobile layouts positioning.

 

If you have the browser specific plugin you can try using some css like the below to position it on the mobile screen better. You can do the same for the social icons position, change the figures to suit etc

 

body.mobile #lang_sel a.lang_sel_sel {padding-left:50px;} 
to position the container and if you want to resize the box slightly something like
body.mobile #lang_sel a.lang_sel_sel { width: 50%;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Lexxus

Thank you James,

 

Unfortunately the positioning worked on one screen, but appeared wrong on another (I just flipped from portrait to landscape mode).. So this does not solve it....

Share this post


Link to post
Share on other sites
James B

Ah i see, ok in that case I'd suggest looking into using the @media prefix so you can style the css depending on whether the device is landscape/portrait. An example of this can be found at - http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 

An example for one using @media would be as below

@media (max-width:768px) {
#lang_sel a.lang_sel_sel { padding-left:50px; 
and following css you want to add can go in here;}}

Otherwise you could enter the login widget into another location which displays better on the mobile and use browser specific css to hide it on the desktop, but show it on the mobile display (and visa versa).


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Lexxus

Ok I understand the idea of playing with screen sizes .. But currently I can't get the initial problem fixed..

 

If I move the language switcher lower, it appears under my menu.. (I style it with margin-left, margin-top)

 

Plus, the site title is positioned wrongly, not in one line with the logo (couldn't get it higher and/or reduce the font size) and social icons also are not displayed correctly.

 

I am trying a bunch of styles but none of them work. :( oof, sorry I'm not that strong in CSS.

 

Appreciate your assistance!

Share this post


Link to post
Share on other sites
Danny

Hi,

 

The issue is caused by your own custom code which adds the language selector, if you remove this selector, your header/branding area will respond perfectly. We are unable to provide custom CSS support for user created code. To resolve your issue, you will most likely need to use either the Browser specific CSS plugin like James recommended or use @media queries to reposition the selector.

 

If you're not comfortable with CSS, the best course of action would be to contact one of our Pros. - http://www.pagelines.com/pros/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Lexxus

Hi Danny,

 

Thank you, I know that the issue is caused by language selector. I am using the Browser Specific CSS plugin without James' recommendation as you can notice, only could not figure out the code to display the selector right under the title (without margin/padding positioning but with some kind of display/inline code).

 

Sorry I am just learning CSS, I thought this was not a difficult issue for some of you to solve..

 

Appreciate your attention.

Share this post


Link to post
Share on other sites
Rob

Sveiki!

 

Unfortunately, we are sometimes limited in dealing with custom coded solutions, so many apologies.

 

I've just checked your site on my phone and can see the problem. 

 

Have you considered replacing the drop down list with some buttons? This might be easier for you, and work better on multiple devices.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Lexxus

Sveiki Rob! :)

 

No, I have not yet considered replacing the dropdown with buttons. This is a WPML solution, will look into it, but I guess it would bring us back to the square one: how to place it under the title....

Share this post


Link to post
Share on other sites
Rob

By any chance did you use the Action Map Plugin to find the applicable hook?

 

How did you place the code for the drop down list? Did you edit the pagelines-customize/functions.php or, use the Hooker Plugin, perhaps?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • Paul
      By Paul+
      I was surprised to see I had no menu today - out of the blue - its actually moved to the bottom of the page!  After hours of fiddling and disabling every single plugin, leaving just plagelines the issue is still present.  See video for a basic text box - I moved it into the head and it jumps to the bottom and shows just above the footer but below the main content.  I have a temp fix by placing the menu into the first row on the main content but it does mean other than my home page, all other pages have no menu.  A quick fix is very urgent for this bug.
      https://thelaptopfixers.com
       
       
    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

    • Dan Haddock
      By Dan Haddock
      Plugins Active and installed: 
      Akismet Anti-Spam
      Coming Soon Page & Maintenance Mode by SeedProd
      Contact Form 7
      Cookie Law Info
      DMS Professional Tools  
      Enhanced Media Library  
      Flamingo
      Google Analytics for WordPress by MonsterInsights
      Google XML Sitemap
      Jetpack by WordPress.com
      Legull 
      Loginizer   
      MailChimp for WordPress
      PageLines Updater    
      Schema App Structured Data 
      Sucuri Security - Auditing, Malware Scanner and Hardening
      Uber reCaptcha    
      Yoast SEO
      Wordpress Version: 4.8.1
      Pagelines Version: 2.2.4
       
      Good Evening/Afternoon or Morning, 
      I am running into a problem with CSS styling not applying inside of most browsers (Safari, Firefox) when I am logged in to wordpress, and all browsers that I have tested when I am logged off and the site has been made public (Chrome, Firefox and Safari).
      As a result, I have managed to identify the probable cause. It looks as though these browsers are refusing to render my sites compiled CSS file due to it being a HTTP URL rather than HTTPS.
      I have attempted to change this URL to HTTPS in my browser, however it brings back an ERROR: File not found page - https://www.shortfilmblog.com/wp-content/uploads/pagelines/compiled-css-core-1505847507.css
      What would you suggest in this regard? Would this be resolvable from your end?
      Happy to provide any further details required.
    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
×