• 0
Sign in to follow this  
Followers 0

correct way to move nav via css for different browser sizes

Question

Posted · Report post

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.

.mainlogo-img {
	    margin-bottom: -110px;
	    margin-left: 0px;
	}
	#nav .content-pad, #secondnav .content-pad {
	        margin-bottom: -620px;
		margin-left: 250px;
	}

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: S2sMs.jpg 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. http://www.studiokotokoto.com/REMOVED username: REMOVED PW: REMOVED Thanks so much! Tan

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

Try the browser-specific CSS plugin available in the PageLines Store: http://www.pagelines.com/store/plugins/browser-css/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

On the store plugin page, it says: [quote]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.[/quote] 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;")

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

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