• 0
Sign in to follow this  
Followers 0

Possible to turn the image in the new 2.2 nav bar on for mobile, off for desktop?

Question

Posted · Report post

I'd like the image in that displays in the new nav bar to be visible for mobile and off for desktop viewers. I tried this custom CSS, which is intended to take advantage of the "Browser Specific CSS" plugin but it didn't do anything: .mobile #plbrand {display:inline;} .desktop #plbrand {display:none;} PS: Site is password-protected.

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

Hi Grant, Using CSS is not the way to go about this, as using display:none; will hide everything associated to plbrand. Therefore, you may need to use an action, I am not sure on the correct way to achieve this but maybe another one of our support team does. If it would be OK could you to be patient and wait for their reply please. I apologise I couldn't be more helpful.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks. I'll wait for more info. The thing is, I already have a logo on the site. I don't need another one in the new navigation bar, nor do I need the name of the site there. Right now what I've done is uploaded a 1px transparent image so that I get no image showing and the name of the site does not show, either, but really, on mobile you kind of need something because the dropdown button on the right of the menu doesn't look like much -- at least, it didn't to the three older people I asked, who do make up an important part of our audience.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Have you considered using the browser-specific CSS plugin to add CSS that includes/excludes what you want in both the mobile browser and computer browser?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Grant, You can achieve a higher level of customization using @media. I wanted the menu button to have some space under it on mobile screens, so I used this code: [code] @media (max-width: 400px) { .navbar-content-pad {padding: 0px 15px 10px 15px !important;} } [/code] Something like this will allow you to set css based on the width of the media screen and to show specific css only on screens that fit the width you set. The code was put in the Custom Code section under PageLines>Site Options. I am thinking that maybe you could have [code] @media (max-width: 1150px) { #plbrand {display:none;} } [/code] for vertical mobile [code] @media (max-width: 400px) { #plbrand {display:inline;} } [/code] for horizontal mobile [code] @media (max-width: 600px) { #plbrand {display:inline;} } [/code] You would have to play with the max-width numbers to achieve the desired result.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for posting a solution, @anthalis

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
Sign in to follow this  
Followers 0