correct way to move nav via css for different browser sizes

[tandan 0]

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: 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

[catrina 103]

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

[tandan 0]

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

[catrina 103]

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;")

[Rob 547]

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.

[Rob 547]

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.

[tandan 0]

@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

[catrina 103]

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)

[tandan 0]

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