Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

This tip is for adding a little drop down arrow for items in your Main Nav that have a sub menu. Now I really don't know why I never thought of doing it this way before so thought I would share it with you.

As we know we have the drop down arrow added for us when in mobile view so I took a look at it and the only reason it does not show in our main nav when not on mobile is just a media query stopping it from showing so all we have to do is add the code with the media query for showing it above the mobile resolution. Now we can add it without a media query but as we may need to adjust the arrow a bit different by using a few margins we add the media query so it does not adjust the mobile version.

So here is the code

margin-left: 10px this moves the arrow over to the right a little away from the tab text

margin-top: 4px this move the arrow down a bit

You do not have to use the margins or you can just adjust the values to suit your site.

The code just goes in your design studio custom CSS

@media only screen and (min-width:769px){
.icon-down::before {
    font-family: 'ning-icon-fonts';
    content: '\e60d';
    float: right;
    margin-left:10px;
    margin-top:4px;
}}

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

  • Love this - thank you John

    • Thanks Kos, found this way of doing while designing my new menu system for the member site I am getting up together. While add it to my demo site soon as well.

  • By the way if you find your arrows a little big you can adjust it's size by adding a font size value to decrease or even increase it.

    For example I have changed mine to a smaller size like this and as it's smaller decreased the margin-top to 2px

    @media only screen and (min-width:769px){
    .icon-down::before {
        font-family: 'ning-icon-fonts';
        content: '\e60d';
        float: right;
        margin-left:10px;
        margin-top: 2px;

    font-size: 12px
    }}

    • That's actually better.  Nice to demonstrate 'how' they can be adjusted.  CSS is intimidating to those unaccustomed to it.  Thanks!

This reply was deleted.

Search the Creators Network

Latest Activity

Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks Pat :-)
Yes it is a nice addition but I do wish a little more QA was done before releasing f…"
15 minutes ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"I have re-uploaded this video so you can see it showing the green screen in the list page and also…"
18 minutes ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks for the reply Kyryl. I have addressed all the issues in a single post for you to look at her…"
21 minutes ago
Danny Lynn replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
""
1 hour ago
Danny Lynn replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Thank you ning team,  I Am not a owner at Media Center just member 4 years, i do link that page to…"
1 hour ago
Pat Howlett replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Great addition Ning Team and I appreciate Bizz John taking the time to jump in and assist in findin…"
2 hours ago
Kyryl_Ning_Support replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Hi Daniel,
We do apologise for the inconveniences at this moment developers are working under the i…"
5 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
Regarding the video resolution, after the video has been uploaded, all of them are convert…"
5 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"XDD"
7 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi there,
Sorry for delayed reply, it was necessary to take a hold of developers to find out the an…"
7 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
About the video that had only green screen background instead of the video itself. we have…"
7 hours ago
Irvin Carrero, Alison Pert and Shanelle Reed-Keahi joined Ning Creators Network
8 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"And now our 'space invaders' top nav bar gif crapped out!  Here's the original:"
10 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"For some reason, our 'Wolf Blitzer' gif hasn't re-animated yet. Here's the page where it exists: ht…"
10 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Thanks for working on this.  Whatever you guys did to fix the Gifs today, I hope it stays like this…"
12 hours ago
Kos replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"BUWAHAHAHAHA! "
14 hours ago
CZG replied to CZG's discussion Logging into ning site using Firefox not secure message
"Thank you Kos. I really appreciate the feedback."
18 hours ago
Anthony Reardon replied to David Carr's discussion Being a Ning Network could ruin the deal
"Got to say I concur with this, sadly."
18 hours ago
Garfield Archivist replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
""
19 hours ago
More…