WordPress.org

Forums

Virtue
[resolved] Adding arrows to the main menu (28 posts)

  1. virtue_fan1
    Member
    Posted 1 year ago #

    Hi there,

    How do I add "down" arrows to my main menu top items to show it opens drop down menu?

    How do I add left arrows to my sub menu items to show they open more sub items to the left?

    Thank you:)

  2. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Well you can add this css:

    #nav-main a>.sf-sub-indicator {
    top: 50%;
    right: 2px;
    margin-top: -5px;
    display:block;
    }

    It's going to do half of what you want, your going to have to add some css for the submenus though. Getting the arrow pointed left and on the left side will require that you add css.

    Kadence Themes

  3. virtue_fan1
    Member
    Posted 1 year ago #

    You Are Truely AWESOME!

    I want to share with you a kind of solution I found for RTL.
    You can offer it I think to people asking you for RTL support.

    The plugins, Polylang and WP-RTL did about 70% of the work. There are still a few areas to correct for RTL, but they did most of the job.

    I still need your advice regarding customizing those arrows and about a few other things.

    I want to offer my assistance with anything I can do for you.

    You can use my help translating it to hebrew, I can also do content writing for you on any subject at any level both in English and in Hebrew.

    Also, I do business development, and I would gladly offer any advice assistance- I have vast experience with both large and SMB technology organizations.

    Please let me know how I can be of assistance.

    Thank you

  4. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Hey,
    Thanks for the offer to help, I'd like to see how the RTL is coming along. Do you have a link? Eventually having a hebrew translation would be great.

    Kadence Themes

  5. virtue_fan1
    Member
    Posted 1 year ago #

    Hi,

    I am currently trying to work with a free hosting solution during development, Biz.nf, but it just keeps crashing. Do you know anything that could be better?

    So at the moment I'm developing primarily on my local machine.
    That is why I'm sharing it with you using these pictures:
    [IMG]http://i59.tinypic.com/ezgwog.jpg[/IMG]
    [IMG]http://i61.tinypic.com/2yw9x5l.jpg[/IMG]
    [IMG]http://i58.tinypic.com/2n7qetz.jpg[/IMG]
    [IMG]http://i62.tinypic.com/2i7u1cn.jpg[/IMG]
    [IMG]http://i61.tinypic.com/1zd5i8k.jpg[/IMG]
    [IMG]http://i62.tinypic.com/20sav49.jpg[/IMG]

    About the Hebrew translation, I can do it for the front end and the "Theme Options" parts.

    Thank you

  6. Mahesh
    Member
    Posted 1 year ago #

    #nav-main a>.sf-sub-indicator {
    top: 50%;
    right: 2px;
    margin-top: -5px;
    display:block;
    }

    this code is not working for top bar menu.
    please help me to get the drop down menu and for sub menu's with indications on top bar menu.

    Thanks in advance.

  7. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Not aware of any free hosting.

    You translate using the po files in the languages folder. You will need poedit. there are tons of tutorials online about how to do it.

    @mailtopmahesh you can add this:

    .topbarmenu a>.sf-sub-indicator {
    top: 50%;
    right: 2px;
    margin-top: -5px;
    display:block;
    }

    although the theme wasn't really designed for this in the topmenu so it's going to need some tweaking. and you my find that you want to switch the image to have white arrows instead.

    Kadence Themes

  8. Mahesh
    Member
    Posted 1 year ago #

    Thank you for your speed reply,

    i just added this code but the top bar looks some odd.
    actually earlier i added below custom css code for font size
    .topbarmenu ul li a {
    font-size: 14px;
    }
    i think thats the way it is showing like that. can u please help me to get a good look for my top bar menu.
    Thanks in advance.

  9. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Can you post a link?

    Kadence Themes

  10. Mahesh
    Member
    Posted 1 year ago #

    Many thanks for quick reply,
    Am very sorry am using local host server , i can not send the link.

    i'm trying to create a website in localhost. and am very new to CSS and etc. but i'm very glad to see the VIRTUE theme in wordpress which is giving a ultimate support. Actually am trying to take a premium theme of VIRTUE for my website. so am sure i'll purchase a premium version of VIRTUE once my website will done in localhost.
    and i need your end support in this regard.

    Thanks in Advance.

  11. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Hey,
    Try doing it with this, remove the previous css and add this:

    .sf-menu a.sf-with-ul:after {
        font-family: 'FontAwesome';
        font-style: normal;
        speak: none;
        font-weight: normal;
       content: "\f0d7";
       float: right;
    margin-left: 5px;
        -webkit-font-smoothing: antialiased;
    }

    Kadence Themes

  12. Mahesh
    Member
    Posted 1 year ago #

    Thanks Kadence,

    It's Worked Great.
    i Appreciate your support. Thank you very much.

    Kadence Themes ROCKZZZ...

  13. virtue_fan1
    Member
    Posted 1 year ago #

    Hi there,

    I completed the translation to Hebrew.
    Here are the language files:
    http://we.tl/i4U9Ge3C04

    Could you help me with merging the "additional information" tab data into the "short description" tab on the product page?

    Also, how can I make the arrows on the menu and sub menu items go left, while keeping the top menu items' arrows down?

    Thank you and please let me know what else I can do for you.

  14. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    What do you mean by merging? the tabs. If you don't want the additional information tab to show just add your data to the description box.

    As for the dropdowns I need to see a link, need to see what you've added and what your working with. Your site live yet?

    Kadence Themes

  15. virtue_fan1
    Member
    Posted 1 year ago #

    By merging I meant that in the "short description" tab I want to have the short description text and right under it, all the attirbutes' data (color, maker, size, etc) which normally appears under the additional details tab.

    I need this to be automated in this way, because the site is for a computer store and all the product's specs will be filled using attributes drop down menus.

    About the arrows, I'll try to find a better hosting solution.

  16. virtue_fan1
    Member
    Posted 1 year ago #

    I managed to get most of it to work.

    This is the link:
    http://omccomputers.co.nf/

    Thank you

  17. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Try this for the dropdowns:

    .sf-dropdown > a:after, .sf-dropdown-submenu > a:after {
    	 content: "\f0d7";
    	 font-family: 'FontAwesome';
    	speak: none;
    	font-style: normal;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	-webkit-font-smoothing: antialiased;
    	float: left;
    	display: block;
    	width: 10px;
    	padding-left: 5px;
    	}
    .sf-menu > .sf-dropdown > a:after{
    	content: "\f0d9";
    	margin-right: -5px;
    }
  18. virtue_fan1
    Member
    Posted 1 year ago #

    It seems to add large arrows to the left on the main menu, and additional smaller down arrows on the sub menus.

    I want small down arrows on the main menu items, and small left arrows on all sub menus' items that have drop downs of themselves.

    This is what it looks like now:
    http://omccomputers.co.nf/

    Thank you

  19. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Ok remove al the code you have and add this:

    .sf-dropdown > a:after, .sf-dropdown-submenu > a:after {
    content: "\f0d9";
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    float: left;
    display: block;
    width: 10px;
    font-size: 14px;
    padding-left: 5px;
    }
    .sf-menu > .sf-dropdown > a:after {
    content: "\f0d7";
    margin-right: 5px;
    }
  20. virtue_fan1
    Member
    Posted 1 year ago #

    The down arrows on main menu items look good now in color and size.

    The first level of submenu items, have their font look small and black (guess thats because of removing the rest of the CSS).
    They are aligned to the left instead of right and thus the arrows are too close.

    The second level of submenu items that have drop down menus of themselves, don't show arrows at all, and also have their fonts black, small and out of alignment.

    http://omccomputers.co.nf/

    Thank you

  21. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    ok by remove the code you have I meant the code for the arrows not the other stuff for alignment. We are specifically talking about the arrows.

  22. virtue_fan1
    Member
    Posted 1 year ago #

    It looks much better.

    However, on the drop down menu of the first top item, the left arrow of the second submenu item goes one row below the text.

    Also second level of submenu items that have their own drop down menus, still don't show the left arrows.

    http://omccomputers.co.nf/

    Thank you

  23. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Hey,
    1. I see that your titles are two rows for one item so the icon would float to the bottom by default. I don't understand that as a problem. It looks natural because you have two lines for the menu?

    2. Ok one more change, don't add this replace your arrow css with this:

    .sf-dropdown > a:after, .sf-dropdown-submenu > a:after, .sf-dropdown-submenu a.sf-with-ul a.sf-with-ul:after  {
    content: "\f0d9";
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    float: left;
    display: block;
    width: 10px;
    font-size: 14px;
    padding-left: 5px;
    }
    .sf-menu > .sf-dropdown > a:after {
    content: "\f0d7";
    margin-right: 5px;
    }
  24. virtue_fan1
    Member
    Posted 1 year ago #

    Hi,

    That item now appears in one row, and yet the arrow goes below it.

    IT it just important for me to have all the arrows appear in the same line after the text.

    I replaced with this code and still the second level of submenu
    items that have their own drop down menu don't show arrows.

    If you hover on the first top menu item to the right-> then the 2nd from the top-> then the 4th from the top- it has a drop down item with no arrows.

    http://omccomputers.co.nf/

    Thank you

  25. virtue_fan1
    Member
    Posted 1 year ago #

    Hi,

    Please get back to me as soon as you can.

    Thank you:)

  26. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    "That item now appears in one row, and yet the arrow goes below it"
    I don't see this, A lot of your menus are two lines. can you post a link to a screen shot of what you are talking about.

    I looked in the header of your site and you don't have the recent css I posted. Your missing the first line.

    Kadence Themes

  27. virtue_fan1
    Member
    Posted 1 year ago #

    Hi,

    This is what I have in the custom css:
    [IMG]http://i60.tinypic.com/v6i7o7.jpg[/IMG]

    And that is the problem with second sublevel menu items
    that don't show an arrow although they have a drop down as well:
    [IMG]http://i62.tinypic.com/2zevww2.png[/IMG]

    Thanks

    * This is all the code I have in the custom CSS:

    .sf-dropdown > a:after, .sf-dropdown-submenu > a:after {
    content: "\f0d9";
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    float: left;
    display: block;
    width: 10px;
    font-size: 14px;
    padding-left: 5px;
    }
    .sf-menu > .sf-dropdown > a:after {
    content: "\f0d7";
    margin-right: 5px;
    }
    
    .home-iconmenu a {
    height: 180px;
    }
    
    .sf-menu > ul li {
    text-align: center;
    }
    .sf-menu li:hover ul, .sf-menu li.sfHover ul, .sf-menu ul  {
    right:0;
    left:auto;
    }
    .sf-menu ul li a {
    font-size: 1.5em !important;
    color: #006EAE !important;
    text-align: right !important;
    }
    .sf-menu ul li a:hover {
        color: #FD8204 !important;
        }    
    
    .home-iconmenu a {
    background: #006EAE;
    }
    
    .captiontitle, .captiontext {
    background: #006EAE;
    }
    
    .flex-caption {
    color: #ffffff;
    }
    
    .sf-menu > ul li {
    text-align: center;
    }
    
    .home-iconmenu h4 {
    font-size:32px;
    }
    
    .home-iconmenu p {
    font-size:18px;
    }
    
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    right: 100%;
    top:0;
    left:auto;
    }
    
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    right: 100%;
    top:0;
    left:auto;
    }
  28. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Ok what you pasted is wrong, that is my point.. look at the first line and then look at what I posted above or below:

    .sf-dropdown > a:after, .sf-dropdown-submenu > a:after, .sf-dropdown-submenu a.sf-with-ul a.sf-with-ul:after  {
    content: "\f0d9";
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    float: left;
    display: block;
    width: 10px;
    font-size: 14px;
    padding-left: 5px;
    }
    .sf-menu > .sf-dropdown > a:after {
    content: "\f0d7";
    margin-right: 5px;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic