Jump to content
Sign in to follow this  
create180design

How to align sub nav with centered main nav

Recommended Posts

create180design

Hi, I have centered my main navigation, but now my sub navigation is not lining up the way I want it to. I want the sub nav to be left aligned underneath its main nav and not have each sub nav be center aligned. See link: http://floridafabric.rapidsys.com/ The Furniture Tab is what I am referring to. ALSO- I do not want the main Furniture tab to be an actual landing page. Is there a way to just have the sub nav's be pages?

Share this post


Link to post
Share on other sites
catrina

For some reason, no matter which page I visit, I can't see the sub navigation under the main navigation.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
create180design

There's no dropdown on the fabric tab? Sorry I didn't mean to confuse. i meant the dropdown for the fabrics page

Share this post


Link to post
Share on other sites
catrina

Oh, I see, then yes, I see the dropdown. Please add the following CSS to Custom Code > Custom CSS:

ul.sub-menu li#menu-item {text-align: left;}

You can make the Furniture tab a non-clickable tab by creating a Custom Menu (Appearance > Menus). Simply add all of the pages you want to the menu and make it the Primary Navigation Menu. When adding the Furniture menu, make it a custom link and in the link text field, add the # sign and then add the subpages that go into that Furniture menu. You can add them as subpages by dragging the links to the right slightly (this is how you know the difference between parent links and child links).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
create180design

Ok. So I added the Furniture tab as a custom link and that worked great. The code for the dropdown does not work however. No difference in appearance. Any other suggestions?

Share this post


Link to post
Share on other sites
create180design

Sorry. Didn't work. This is what I have in my custom CSS. Maybe it's affecting something? #nav_row ul{padding-bottom:10px !important;float:none !important;text-align:center;} #primary-nav li{float:none !important;display:inline !important;} #primary-nav a{float:none !important;display:inline !important;} #nav_row ul.sub-menu li.menu-item {text-align: left;} div.branding_wrap {text-align: center;}

Share this post


Link to post
Share on other sites
catrina

This is conflicting with the code I'm providing for the drop down menus:

#nav_row ul{padding-bottom:10px !important;float:none !important;text-align:center;}
Delete that and replace it with the following:
#nav_row li#menu-item li.menu-item {padding-bottom:10px !important;float:none !important;text-align:center;} 


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
create180design

Please take a look at site now. The main nav is now aligned left and dropdown aligned right. LOL.

Share this post


Link to post
Share on other sites
Jenny

I see you got the main nav centered again but the sub nav is still incorrect. Try the following. In your custom CSS, replace this:

#primary-nav a {
	    display: inline !important;
	    float: none !important;
	}
with this:
#primary-nav a {
	    display: inline !important;
	}
Then add this:
ul.sf-menu ul li a {
	    background-color: #F1F1F1;
	    float: left;
	    padding: 10px 15px;
	}


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
create180design

Thank you. That definitely helped. Is there a reason why the furniture button background changes in size when you scroll over to the dropdown?

Share this post


Link to post
Share on other sites
create180design

This is what I have in the CSS: #nav_row ul{padding-bottom:15px !important;float:none !important;text-align:center;} #primary-nav li{float:none !important;display:inline !important;} #primary-nav a { display: inline !important; } ul.sf-menu ul li a { background-color: #F1F1F1; float: left; padding: 10px 15px; }

Share this post


Link to post
Share on other sites
Jenny

Yeah I noticed that too and I can't figure out where to fix it. It's a padding issue somewhere. I'll keep looking but hopefully someone else knows the answer. :)


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
Jenny

Try adding

ul.sf-menu li:hover {
	    padding: 10px 15px;
	}


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
create180design

Thanks Jenny. That helped. It's still a little weird but I think I can get away with it.

Share this post


Link to post
Share on other sites
catrina

If you don't need further assistance, I'll accept and close this topic. Would that be okay?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
create180design

If you can look at this one more time, The formatting is just not working right yet. If you have any suggestions on what it could be I would really appreciate it!

Share this post


Link to post
Share on other sites
create180design

Actually, Having some major issues now. I added a drop down to the contact page and the secondary menu names are appearing next to each other instead of underneath and the colors are messing up formatting wise as well.

Share this post


Link to post
Share on other sites
Jenny

All of the sub nav's are left aligned by default and the padding is also okay by default too. It seems to me like you have too much conflicting code going on that's overriding each other. I would love the chance to start from scratch but that would mean you'd have to delete any custom code associated with the nav, including the original centering code you added. If you want to do this, make sure you only delete the nav code and not any other custom code you've added. You have some real strange CSS happening and at this point I think we should start fresh. It's your call though. :)


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
create180design

OK. I'll Start Fresh. Here's what I had (that had to do with the main nav. which I'm deleting. Let me know where to go from here. Thank you!! div.branding_wrap {text-align: center;} #nav_row ul{padding-bottom:13px !important;float:none !important;text-align:center;} #primary-nav li{float:none !important;display:inline !important;} #primary-nav a { display: inline !important; } ul.sf-menu ul li a { background-color: #F1F1F1; float: left; padding: 10px 10px; } ul.sf-menu li:hover { padding: 10px 10px; } .main-nav li a { font-size: 1em; } #secondnav { font-size: 1.0em; } #secondnav ul li.current_page_item a { color: #cee094 !important; }

Share this post


Link to post
Share on other sites
Jenny

And just to verify, you want the main nav centered on the page and the first child nav to be left aligned, correct?


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
create180design

Main Nav Centered, and the dropdown left aligned??¦Yes.

Share this post


Link to post
Share on other sites
Jenny

Okay. Add this to your custom CSS. I included a little note so you can easily remember what to change later, if needed:

	/* Change the % in the future when adding/deleting menu items */
	.main_nav {
	    margin-left: 20%;
	}
	

That should do it!


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
create180design

FANTASTIC!!! Now I'll just add back in the logo centering and voil?  ! Thank you!!

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  

×