Nav Bar Tweaks.

AndrewVernon · January 15, 2015

Hey Guys,

Alright, I can't find any threads that address exactly what I am looking to do and have tried tweaking a couple of the other ideas to no avail.

I want to create a nav bar in smug mug that looks and acts like the one on my wordpress site www.AndrewVernonPhotography.com.

I have gotten pretty close, but there are some spacing issues, and while I've gotten the hover function to work for text, I want the background around the specific work I am hovering over, to also change colors like how it does on my wordpress site. The new background color behind the specific nav bar link would be #000000 instead of #282828, with the font going red when hovered over.

I KINDOF having it doing this now, but there are spacing issues with the area behind the text that changes colors.

Any ideas on how to do what I want?

Here's what I have so far on smug mug... http://andrewvernonphotography.smugmug.com/Landscapes/Florida/

Thanks!

AndrewVernon · January 15, 2015

By the way, here's the code I have used thus far for Hover settings.

/* Turn the navbar text a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #c43c3c !important;
background: #000000 !important; height:70px;
padding-top: 25px;
padding-bottom: 25px;

}

/*Nav Bar Customizations*/
.sm-page-widget-nav { background: #282828; height: 70px;
line-height: 70px;}
.sm-page-widget-nav a {color: #fff !important;
vertical-align: middle;}
.sm-page-widget-nav a:hover {
color: #000000 !important;}

Hikin' Mike · January 15, 2015

I would remove this in red:

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
    color: #c43c3c !important;
    [COLOR=Red]background: #000000 !important; 
    height:70px;
    padding-top: 25px;
    padding-bottom: 25px;[/COLOR]
    }

Then add this:

.sm-user-ui.yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui .yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children, 
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
    background-color: #000 !important;
    margin-top: -1px !important;
    border: 0 !important
    }

You'll probably have to change a few more things, but that should get you closer.

AndrewVernon · January 15, 2015

Hikin' Mike wrote: »

I would remove this in red:

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
    color: #c43c3c !important;
    [COLOR=Red]background: #000000 !important; 
    height:70px;
    padding-top: 25px;
    padding-bottom: 25px;[/COLOR]
    }

Then add this:

.sm-user-ui.yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui .yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children, 
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
    background-color: #000 !important;
    margin-top: -1px !important;
    border: 0 !important
    }

You'll probably have to change a few more things, but that should get you closer.

Hmmm... I'm not seeing any difference. Any ideas? I really appreciate all the help you've given me today man.

AndrewVernon · January 15, 2015

I should mention, I am trying to change the hover background of the MAIN bar, not the dropdown menus. Does that make a difference?

Hikin' Mike · January 15, 2015

Yes, I didn't realize you were still trying to change the top nav.

I see you didn't change the page width yet...not that this will help, just an observation.

AndrewVernon · January 15, 2015

Yea... Actually, I think I did... Although my site is being weird... I have been measuring pixel distances between the top bars, logo and menu all day. I think I have them almost perfect, and as far as I can tell, the widths are the same at this point.

Any idea if it's even possible to make the top menu do what I want it to?

Hikin' Mike · January 15, 2015

Sorry about that. I guess you need to add the stuff in red I posted a few lines above. That will add the black background behind the hover. Adding the correct font will help too.

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-m, 
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-m .yui3-menu-item, 
.sm-page-widget-nav .sm-page-widget-nav-accordion.sm-page-widget-nav-m .sm-accordion-item-label, 
.sm-page-widget-nav .sm-page-widget-nav-footer.sm-page-widget-nav-m, 
.sm-page-widget-nav .sm-page-widget-nav-mobile.sm-page-widget-nav-m  {    
    font-size: 13px;
    font-family: "Open Sans";
    font-weight: bold;
    }

I'll have to get the Google Font code, so give me a few minutes or so....It's almost dinner time.

Hikin' Mike · January 15, 2015

Add this to your theme's CSS to load the nav font:

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src:url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot'),
		url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot?#iefix') format('embedded-opentype'), 
		url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),
		url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf') format('truetype');
}

AndrewVernon · January 15, 2015

Hikin' Mike wrote: »
Sorry about that. I guess you need to add the stuff in red I posted a few lines above. That will add the black background behind the hover. Adding the correct font will help too.
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-m, 
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-m .yui3-menu-item, 
.sm-page-widget-nav .sm-page-widget-nav-accordion.sm-page-widget-nav-m .sm-accordion-item-label, 
.sm-page-widget-nav .sm-page-widget-nav-footer.sm-page-widget-nav-m, 
.sm-page-widget-nav .sm-page-widget-nav-mobile.sm-page-widget-nav-m  {    
    font-size: 13px;
    font-family: "Open Sans";
    font-weight: bold;
    }
I'll have to get the Google Font code, so give me a few minutes or so....It's almost dinner time.

Wow wow wow. That's basically it! It's awesome! Thank you for your help! I barely know enough to be dangerous with all this CSS stuff and am blown away by what you and this forum have helped me do. Really appreciate it.

So, now I am going to stretch my luck... Two things: First, I noticed that my dropdown menus are getting weird when I go to hover over them. Somehow, some of the code from the Top menu is affecting them. Although, I'm not quite sure what code. Any ideas?

Second, the ONLY other thing that could be done to make the navigation even more similar between the two sites would be to get the background hover color to extend to exactly the halfway mark between the menu-link my mouse is hovering over, and the menu links on either side. If not possible, I am absolutely thrilled with how it is already, so it's not a huge deal! But, this would make the two menus basically identical.

AndrewVernon · January 15, 2015

By the way, nice site! How'd you get the upside down carrots on your dropdown menus? I was trying to figure out how to do that earlier today actually and couldn't come up with anything I liked...

Hikin' Mike · January 15, 2015

Well I know just enough HTML/CSS to be dangerous too...

!

I can take a look at the other issues later this evening and I'll post them when I find them.

The carrots is part of my WordPress code. Remember, I used the WP nav stuff, but you might be able to add them to yours. The carrot is actually a font and this is what I have on my nav. The '.menu li > a::after' is the WordPress stuff, so that wouldn't work on SM. The other stuff, including the font is Smugmug.

	/* Primary/Secondary Menus. */	
[B].menu li > a::after[/B] {
	content:        '\E343';
	display:        inline-block;
	margin:         -12px 0 0;
	font:           normal 24px/1 'SmugMug Icon Font Small';
	vertical-align: top;	
	-webkit-font-smoothing: antialiased;
	padding-left: 5px; 
	}

Hikin' Mike · January 16, 2015

Find each of your HTML/CSS containers and change these:

/* Social Widget */
.sm-page-widget-9457260 .sm-page-widget-content {
	margin-top:5px;
	margin-left: 35px;
	margin-bottom: 0;
	}

/* "Line" Widget */
.sm-page-widget-9457278 .sm-page-widget-content{
	margin-top: -7px;
	}

/* Search Widget */
.sm-page-widget-9457276 .sm-page-widget-content {
	margin-top: 0;
	}
	
/* Logo Widget*/
.sm-page-widget-9445176 .sm-page-widget-content {
    margin-bottom: 40px;
    margin-top: 25px;
}

Remove this in bold:

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
	color: #c43c3c !important;
	background: #000000 !important; 
[B]	height:70px;
	padding-top: 25px;
	padding-bottom: 25px;[/B]
	}

That should get you closer now.

Hikin' Mike · January 16, 2015

Remove this in red and add this in green:

/*Nav Bar Customizations*/
.sm-page-widget-nav { 
	background: #282828; 
	[COLOR="Red"]height: 70px;
	line-height: 70px;[/COLOR]
	[COLOR="Lime"]padding: 26px 0 15px;[/COLOR]	
	}

In one of your HTML/CSS boxes, remove this in red:

.sm-page-widget-9445577 .sm-page-widget-content {
    [COLOR="Red"]margin-bottom: 300px;[/COLOR]
    margin-top: 0;
	}

Add this to your theme's CSS:

.sm-user-ui.yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui .yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children, 
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
    background-color: #282828 !important;
    border: 0 !important
    }

AndrewVernon · January 16, 2015

Hikin' Mike wrote: »

Find each of your HTML/CSS containers and change these:

/* Social Widget */
.sm-page-widget-9457260 .sm-page-widget-content {
	margin-top:5px;
	margin-left: 35px;
	margin-bottom: 0;
	}

/* "Line" Widget */
.sm-page-widget-9457278 .sm-page-widget-content{
	margin-top: -7px;
	}

/* Search Widget */
.sm-page-widget-9457276 .sm-page-widget-content {
	margin-top: 0;
	}
	
/* Logo Widget*/
.sm-page-widget-9445176 .sm-page-widget-content {
    margin-bottom: 40px;
    margin-top: 25px;
}

Remove this in bold:

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
	color: #c43c3c !important;
	background: #000000 !important; 
[B]	height:70px;
	padding-top: 25px;
	padding-bottom: 25px;[/B]
	}

That should get you closer now.

I went ahead and left this how you said so you can see what it's doing... Your suggestion DID fix how my dropdowns look when I hover on them. BUT, now my main menu hover background doesn't extend all the way to the top and bottom edges of my menu. Any idea how to target JUST that without affecting the dropdown menu?

Hikin' Mike · January 16, 2015

Remove in red and add in green. That should show the hovers correctly.

.sm-page-widget-nav a {
    color: #fff !important;
    [COLOR=Lime]padding: 25px 10px;[/COLOR]
    [COLOR=Red]padding-left: 10px;
    padding-right: 10px;[/COLOR]
    vertical-align: middle;
    }

AndrewVernon · January 16, 2015

Hikin' Mike wrote: »
Remove in red and add in green. That should show the hovers correctly.
.sm-page-widget-nav a {
    color: #fff !important;
    [COLOR=Lime]padding: 25px 10px;[/COLOR]
    [COLOR=Red]padding-left: 10px;
    padding-right: 10px;[/COLOR]
    vertical-align: middle;
    }

That did it! Great... Any idea how to get that background color on hover to extend to the exact middle between the two menu links on either side?

And, new question... Think it's possible to replicate my footer at www.AndrewVernonPhotography.com on SmugMug? I couldn't even get close...

Hikin' Mike · January 17, 2015

AndrewVernon wrote: »

That did it! Great... Any idea how to get that background color on hover to extend to the exact middle between the two menu links on either side?

And, new question... Think it's possible to replicate my footer at www.AndrewVernonPhotography.com on SmugMug? I couldn't even get close...

I think I understand. Remove this in red:

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
	display: inline-block;
	[COLOR="Red"]margin-right: 24px;[/COLOR]
	}

Then change 10px to 22px here:

.sm-page-widget-nav a {
	color: #fff !important;
	padding: 25px [COLOR="DarkOrange"][B]22[/B][/COLOR]px;
	vertical-align: middle;
	}

As for the footer, you won't be able to replicate it because of the recent post stuff...among other things.

ChancyRat · January 17, 2015

Where are the carrots?
Mike, I don't see any carrots on your menus. Can you direct me to seeing what you did?
I might want carrots too.

.

Hikin' Mike wrote: »
Well I know just enough HTML/CSS to be dangerous too...!

I can take a look at the other issues later this evening and I'll post them when I find them.

The carrots is part of my WordPress code. Remember, I used the WP nav stuff, but you might be able to add them to yours. The carrot is actually a font and this is what I have on my nav. The '.menu li > a::after' is the WordPress stuff, so that wouldn't work on SM. The other stuff, including the font is Smugmug.
	/* Primary/Secondary Menus. */	
[B].menu li > a::after[/B] {
	content:        '\E343';
	display:        inline-block;
	margin:         -12px 0 0;
	font:           normal 24px/1 'SmugMug Icon Font Small';
	vertical-align: top;	
	-webkit-font-smoothing: antialiased;
	padding-left: 5px; 
	}

Hikin' Mike · January 17, 2015

ChancyRat wrote: »

Mike, I don't see any carrots on your menus. Can you direct me to seeing what you did?
I might want carrots too. .

This:

Keep in mind, the code above is NOT going to work out of the box.

ChancyRat · January 17, 2015

Oh Mike. Well, I'll be totally honest. I was expecting carrots.

I am serious, I wanted to see a carrot next to each link.

ChancyRat · January 17, 2015

I swear it.
Like this. Like this.

Hikin' Mike · January 17, 2015

ChancyRat wrote: »

Like this. Like this.

I should have known...

ChancyRat · January 17, 2015

Back to hopefully a sane question. Mike, I love your layout all over your site. Is this page a Folder page and did you create the gallery images with single photo blocks, or - how did you do them so that you have descriptions below the images?

http://www.imagesinthebackcountry.com/portfolio/landscape/

Hikin' Mike · January 17, 2015

ChancyRat wrote: »

Back to hopefully a sane question. Mike, I love your layout all over your site. Is this page a Folder page and did you create the gallery images with single photo blocks, or - how did you do them so that you have descriptions below the images?

http://www.imagesinthebackcountry.com/portfolio/landscape/

That particular page you posted is from my WordPress site.

Nav Bar Tweaks.

Comments