Jump to content
Sign in to follow this  
mr-twisted

Move Nav Icons on Top of Nav Bar (in place of search)

Recommended Posts

mr-twisted

I'd like to move the social media icons onto the nav bar. I tried moving them down, but they end up behind the nav bar. Thanks!

Share this post


Link to post
Share on other sites
bryan-hadaway

Please provide a link to your site and what method / code were you trying? Thanks, Bryan

Share this post


Link to post
Share on other sites
infotwistedtoolscom

Unfortunately, I can't give you the link to the site as it is a password only staging site. I tried this code, but the icons fall behind the nav bar. I think I may just leave them where they were though... .icons { position:absolute; right:0; bottom:5px; height: 50px; top: 78px; } Thanks!

Share this post


Link to post
Share on other sites
bryan-hadaway

Possibly try:

.icons {
	position:absolute;
	right:0;
	bottom:5px;
	height: 50px;
	top: 78px;
	z-index: 100
	}

Unfortunately it will make it difficult without being able to see the site. Thanks, Bryan

Share this post


Link to post
Share on other sites
anvilmediainc

This is exactly what I'm trying to do as well. Any help would be appreciated. I've tried this: ` .icons { position:absolute; right:0; bottom:5px; height: 50px; top: 110px; z-index: 100; } ` I've also tried adding !important to the z-index and making it 999999999 with no luck. SITE: http://dev.davidlbackes.com/ edit: I'm open to doing this another way if CSS won't work, just not sure where to start.

Share this post


Link to post
Share on other sites
bryan-hadaway

Is that URL correct, I'm not getting anything? Thanks, Bryan

Share this post


Link to post
Share on other sites
bryan-hadaway

` #primary-nav{z-index:0} .icons{ position:relative; top:35px} ` Let's try that. Thanks, Bryan

Share this post


Link to post
Share on other sites
anvilmediainc

Nice! Thanks! And I've been adding all of my custom CSS into the custom code tab--is this what's recommended, or is it better to edit the base child's CSS directly? Edit: Just had a second to try it out. It looks correct visually, but the dropdown now falls behind the feature box and the links aren't clickable anymore if you hover over the text. You have to move your mouse up to the top of the orange nav bar. Edit 2: Using this helps almost everything: `#primary-nav{z-index:1;}` ` .icons { position:absolute; top: 115px; z-index: 2 !important; } ` If you try to use the drop-down on Resources, it behaves a little weird and it's hard to actually click on those sub links now. Any ideas?

Share this post


Link to post
Share on other sites
cmunns

you need to add this to `#breadcrumb {position:relative;z-index:0;}`

Share this post


Link to post
Share on other sites
bryan-hadaway

Good to hear it worked. Thanks, Bryan

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  

×