Jump to content


Photo
- - - - -

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


  • Please log in to reply
5 replies to this topic

#1 awww

awww

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 21 June 2012 - 04:39 AM

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.

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 June 2012 - 08:04 AM

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.

#3 awww

awww

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 22 June 2012 - 12:31 PM

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.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 22 June 2012 - 04:05 PM

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?

#5 anthalis

anthalis

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:Dev. Latest. Always.
  • Country: Country Flag

Posted 24 June 2012 - 08:29 AM

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:

Please Login or Register to see this Hidden Content


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

Please Login or Register to see this Hidden Content


for vertical mobile

Please Login or Register to see this Hidden Content


for horizontal mobile

Please Login or Register to see this Hidden Content


You would have to play with the max-width numbers to achieve the desired result.

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 June 2012 - 03:28 PM

Thanks for posting a solution, @anthalis