Nav Bar Tweaks.

AndrewVernonAndrewVernon Registered Users Posts: 33 Big grins
edited January 17, 2015 in SmugMug Customization
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!

Comments

  • AndrewVernonAndrewVernon Registered Users Posts: 33 Big grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • AndrewVernonAndrewVernon Registered Users Posts: 33 Big grins
    edited 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.
  • AndrewVernonAndrewVernon Registered Users Posts: 33 Big grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • AndrewVernonAndrewVernon Registered Users Posts: 33 Big grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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');
}
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • AndrewVernonAndrewVernon Registered Users Posts: 33 Big grins
    edited 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.
  • AndrewVernonAndrewVernon Registered Users Posts: 33 Big grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited January 15, 2015
    Well I know just enough HTML/CSS to be dangerous too...Laughing.gif!

    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; 
	}
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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
    }
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • AndrewVernonAndrewVernon Registered Users Posts: 33 Big grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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;
    }
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • AndrewVernonAndrewVernon Registered Users Posts: 33 Big grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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. Laughing.gif.
    Hikin' Mike wrote: »
    Well I know just enough HTML/CSS to be dangerous too...Laughing.gif!

    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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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. Laughing.gif.

    This:

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

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 17, 2015
    Oh Mike. Well, I'll be totally honest. I was expecting carrots.
    rolleyes1.gifrolleyes1.gifrolleyes1.gif

    I am serious, I wanted to see a carrot next to each link.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 17, 2015
    I swear it.
    Like this. Like this.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited January 17, 2015
    ChancyRat wrote: »
    Like this. Like this.

    I should have known...rolleyes1.gif
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Sign In or Register to comment.