Jump to content


Photo
- - - - -

correct way to move nav via css for different browser sizes


  • Please log in to reply
8 replies to this topic

#1 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 16 June 2012 - 04:04 PM

Hi there,

I've made this css change to move the nav bar next to the logo which looks great on desktop but when I checked on my ipad and iphone it was a massive fail.

Please Login or Register to see this Hidden Content


Does anyone have a tip on the "proper" way to to do this so that it doesn't get all wacky on mobile devices.

I need the navigation to look like this:
Posted Image

The way I imagine the nav working on smaller width is for it to "stack" neatly underneath the logo. Is this possible?

I have an under construction page up now so you can't view the site live unless logged in but you can login to view with a subscriber account i've set up temporarily.

Please Login or Register to see this Hidden Content


username: REMOVED
PW: REMOVED

Thanks so much!
Tan

#2 catrina

catrina

    Advocate

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

Posted 16 June 2012 - 04:17 PM

Try the browser-specific CSS plugin available in the PageLines Store:

Please Login or Register to see this Hidden Content



#3 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 16 June 2012 - 06:42 PM

hi catrina, ok, i will! thanks for your advice. is there any documentation on doing this? i am not sure what i should do after installing it... thanks!! tan

#4 catrina

catrina

    Advocate

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

Posted 16 June 2012 - 06:47 PM

On the store plugin page, it says:

The plugin actually adds new classes to the main body tag in the html of your page, so if your viewing the page on a PC in chrome, it adds desktop chrome to the tags, if your on an iphone it adds iphone, it supports all major browsers and mobile/tablets. This makes it possible to target these browsers in your custom css.


Basically, you just have to use the new classes that are added to target the elements that you want to change. (i.e. if you want to make a text color adjustment for the iPhone, you'll use the iPhone class and the text color attribute, "color: #XXXXXX;")

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 17 June 2012 - 10:35 PM

Tan, please never post passwords to admin areas of your site publicly. Best possible way to be hacked. I've deleted it for security purposes. I'd suggest you immediately change that password.

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 17 June 2012 - 10:43 PM

For your menu, I believe you want to use the BrandNav menu, rather than Branding. You will want to keep the Navigation, placed at the top, but don't add anything to that menu via Dashboard > Appearance > Menus. That insures you have the search box at the top (per your diagram). The BrandNav places the image inline with the menu. Some simple CSS will allow you to align the menu and image as described in the image.

#7 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 21 June 2012 - 10:19 PM

@rangelone Hi there! I am trying out what you suggested but I've always added menus with appearance>menus. I was wondering how to hide some pages from appearing automatically on this menu. I have Jigoshop installed so they have created a bunch of pages that 'm not quite sure where they will go yet. Right now the brand nav is under the logo (need to move it with css still) which is good...but there still isn't a search bar...even though I have enabled it under site options>header and footer. It seems with the newest version of PL there is now an option for classic nav (but I used Brand Nav as you suggested) How can I get the social media icons and search bar to come back?? Thanks!! Tan

#8 catrina

catrina

    Advocate

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

Posted 22 June 2012 - 02:20 AM

Is the issue occurring on both the mobile and computer browser? (If you want, you can private message me the log-in details for the website)

#9 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 11 July 2012 - 05:10 PM

Hi Catrina, I actually solved it and I used the browser specific plugin you suggested! Thanks so much for your help!