SubMenu Arrows

AndrewVernon

Hey Guys,

New project! I want to get the little downwards brackets onto my Menu next to the items that have dropdowns.... I've gotten together some code that works to put something specifically behind those items, but can't manage to use the code to put in the specific character that I want...

Here's what I have so far:

.sm-page-widget-nav  li:nth-child(2) a:after, .sm-page-widget-nav li:nth-child(3) a:after  {
    font-family: "FontAwesome";
   	content: \f107;
    display: inline-block;
    margin: 1px 0px 0px 5px;
    vertical-align: top;
}

.yui3-menu-children a:after {
  content: none !important;
}

Basically, I want it to as closely as possible match my wordpress site here - www.AndrewVernonPhotography.com

I have two ideas for where to possibly get the characters. The first is to use an icon that's part of SmugMug's existing font icon set... If you inspect elements on their dashboard, they have a downward bracket on the sorting select box towards the upper right corner, and down the left side of the organizer page next to each of the folders. I'm wondering if I couldn't somehow reference those and use them in my menu?

My second idea is to somehow try to reference the Font Awesome icons... Here's the particular one I would want - http://fortawesome.github.io/Font-Awesome/icon/angle-down/ I just can't figure out how to get Font Awesome to work with my smug mug files...

Any ideas or ways of accomplishing this?

Hope all is well!

Andrew.

AndrewVernon

any ideas guys?

Hikin' Mike

see thread below

Hikin' Mike

Here's an update. Remove your code here:

.sm-page-widget-nav  li:nth-child(2) a:after, .sm-page-widget-nav li:nth-child(3) a:after  {     font-family: "FontAwesome";    	content: \f107;     display: inline-block;     margin: 1px 0px 0px 5px;     vertical-align: top; }  .yui3-menu-children a:after {   content: none !important; }

Add this instead:

.sm-page-widget-nav-toplink:nth-child(2):after,
.sm-page-widget-nav-toplink:nth-child(3):after {
    font: normal 24px/1 'SmugMug Icon Font Small';
    content: '\E343';
    display: inline-block;
    margin: -8px 0 0;
    vertical-align: top;    
    -webkit-font-smoothing: antialiased;
    padding-left: 5px; 
    }

You may have to tailor your 'margin' to suit.

AndrewVernon

Hikin' Mike wrote: »

Here's an update. Remove your code here:

.sm-page-widget-nav  li:nth-child(2) a:after, .sm-page-widget-nav li:nth-child(3) a:after  {     font-family: "FontAwesome";    	content: \f107;     display: inline-block;     margin: 1px 0px 0px 5px;     vertical-align: top; }  .yui3-menu-children a:after {   content: none !important; }

Add this instead:

.sm-page-widget-nav-toplink:nth-child(2):after,
.sm-page-widget-nav-toplink:nth-child(3):after {
    font: normal 24px/1 'SmugMug Icon Font Small';
    content: '\E343';
    display: inline-block;
    margin: -8px 0 0;
    vertical-align: top;    
    -webkit-font-smoothing: antialiased;
    padding-left: 5px; 
    }

You may have to tailor your 'margin' to suit.

Perfect! Thanks man! Exactly what I was hoping to do.

AndrewVernon

So last change... Any way to get the background color that changes on hover to be wide enough to include the downwards brackets we just changed? Technically, I'd love for the background hover color to extend left and right to exactly the halfway mark between each menu item. Make sense? Even possible? Thanks...

Hikin' Mike

AndrewVernon wrote: »

So last change... Any way to get the background color that changes on hover to be wide enough to include the downwards brackets we just changed? Technically, I'd love for the background hover color to extend left and right to exactly the halfway mark between each menu item. Make sense? Even possible? Thanks...

I understand, and I'm not sure if that is possible. I'll play around, but I wouldn't get your hopes up.

toddbuchanan

Sweet! Nice little additon to a site!

val_alderson

Hi there -

I have tried this:
.sm-page-widget-nav-toplink:nth-child(2):after,
.sm-page-widget-nav-toplink:nth-child(3):after {
font: normal 24px/1 'SmugMug Icon Font Small';
content: '\E343';
display: inline-block;
margin: -8px 0 0;
vertical-align: top;
-webkit-font-smoothing: antialiased;
padding-left: 5px;
}

to get the sub arrows. However, unfortunately it adds sub arrows not to the menu items that actually have smug mug sublinks but to other ones instead. I'm sure I'm doing something wrong but I'm not sure what! Any help would be greatly appreciated! Thanks. :-)

http://www.flyingcanadianphotography.com/

Hikin' Mike

@val_alderson said:
Hi there -



I have tried this:

.sm-page-widget-nav-toplink:nth-child(2):after,

.sm-page-widget-nav-toplink:nth-child(3):after {

font: normal 24px/1 'SmugMug Icon Font Small';

content: '\E343';

display: inline-block;

margin: -8px 0 0;

vertical-align: top;

-webkit-font-smoothing: antialiased;

padding-left: 5px;

}



to get the sub arrows. However, unfortunately it adds sub arrows not to the menu items that actually have smug mug sublinks but to other ones instead. I'm sure I'm doing something wrong but I'm not sure what! Any help would be greatly appreciated! Thanks. :-)



http://www.flyingcanadianphotography.com/

You have two problems. First, you have some "illegal" code. Remove this: - not active -. That is not CSS and that's preventing any good CSS to work.

Copy and pasting somebody else's code isn't a good thing. In this case the the .sm-page-widget-nav-toplink:nth-child(2):after and .sm-page-widget-nav-toplink:nth-child(3):after means that you'll add that arrow on the second and third top menus (Animals and Portraits). You want the sixth (About) top link. Remove the code you posted above and use this:

.sm-page-widget-nav-toplink:nth-child(6):after {
    font: normal 24px/1 'SmugMug Icon Font Small';
    content: '\E343';
    display: inline-block;
    margin: -8px 0 0;
    vertical-align: top; 
    -webkit-font-smoothing: antialiased;
    padding-left: 5px; 
    }

val_alderson

Thanks so much. That's exactly what I wanted. That's really helpful. :-)

Djm3006

Hi Mike,
Am i correct in saying that adding (.sm-page-widget-nav-toplink:nth-child(NUMBER):after) for each drop down menu will put the arrow next to the name of menu title ? So I would have to put the code in 5 times 2,3,4,5,6 for drop downs.
Cheers
Dave

Hikin' Mike

@Djm3006 said:
Hi Mike,
Am i correct in saying that adding (.sm-page-widget-nav-toplink:nth-child(NUMBER):after) for each drop down menu will put the arrow next to the name of menu title ? So I would have to put the code in 5 times 2,3,4,5,6 for drop downs.
Cheers
Dave

Yes, you need all 5:

.sm-page-widget-nav-toplink:nth-child(2):after,
.sm-page-widget-nav-toplink:nth-child(3):after,
.sm-page-widget-nav-toplink:nth-child(4):after,
.sm-page-widget-nav-toplink:nth-child(5):after,
.sm-page-widget-nav-toplink:nth-child(6):after {
    font: normal 24px/1 'SmugMug Icon Font Small';
    content: '\E343';
    display: inline-block;
    margin: -8px 0 0;
    vertical-align: top; 
    -webkit-font-smoothing: antialiased;
    padding-left: 5px; 
    }

Here is a tutorial I wrote to customize your menus: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Customize-Dropdowns

Djm3006

@Hikin' Mike said:

@Djm3006 said:
Hi Mike,
Am i correct in saying that adding (.sm-page-widget-nav-toplink:nth-child(NUMBER):after) for each drop down menu will put the arrow next to the name of menu title ? So I would have to put the code in 5 times 2,3,4,5,6 for drop downs.
Cheers
Dave

Yes, you need all 5:

.sm-page-widget-nav-toplink:nth-child(2):after,
.sm-page-widget-nav-toplink:nth-child(3):after,
.sm-page-widget-nav-toplink:nth-child(4):after,
.sm-page-widget-nav-toplink:nth-child(5):after,
.sm-page-widget-nav-toplink:nth-child(6):after {
    font: normal 24px/1 'SmugMug Icon Font Small';
    content: '\E343';
    display: inline-block;
    margin: -8px 0 0;
    vertical-align: top; 
    -webkit-font-smoothing: antialiased;
    padding-left: 5px; 
    }

Here is a tutorial I wrote to customize your menus: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Customize-Dropdowns

Thanks Mike