home page categories and sub categories drop down menu too long

Home Forums eStore Free home page categories and sub categories drop down menu too long

This topic contains 9 replies, has 3 voices, and was last updated by  Nima 2 years, 2 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1299748

    iaudify1
    Participant

    kindly show me how to achieve the following..

    1. how do i make my homepage category drop down menus show a >> sign signifying other sub menus.
    2. my category menus and sub-menus are much, so the drop down is very long. how do i show it in multiple columns.

    thanks abunch.

    #1299897

    Ashish
    Moderator

    Hello @iaudify1,

    You can add following code inside Appearance > Customize > Additional CSS

    @media screen and ( min-width: 768px ) {
    	#site-navigation .sub-menu li ul.sub-menu {
    		width: 400px;
    	}
    
    	#site-navigation .sub-menu li ul.sub-menu li {
    		display: inline-block;
    		float: left;
    	}
    
    	#site-navigation .sub-menu li ul.sub-menu li {
    		width: 50%;
    	}
    
    	#site-navigation .sub-menu li ul.sub-menu li:nth-child( odd ) {
    		clear: both;
    	}
    }

    Regards,

    ThemeGrill Support Team.

    #1299921

    iaudify1
    Participant

    thanks for the reply. the category menu & sub menu i want to make the changes to is the SECONDARY MENU to your left side. the above code did not take effect on it.

    #1300027

    Ashish
    Moderator

    Hello again, @iaudify1,

    Can you provide your site URL?

    Regards,

    ThemeGrill Support Team.

    #1300054

    iaudify1
    Participant

    @ashishsthanp The link is https://iaudify.com . I want to work on the BOOK CATEGORY DROP down & AUTHORS SUB-MENU list THAT IS TOO LENGTHY by showing it in multiple columns. Then also show a >> sign in front of the drop lists that has Sub menus

    thanks.

    #1300197

    Ashish
    Moderator

    Hello, @iaudify1.

    Add the following CSS code:

    .category-navigation .menu-item-has-children >  a:after {
        color: #454545;
        content: "\f105";
        font-family: FontAwesome;;
    	position: absolute;
        right: 15px;
    }
    
    #category-navigation ul.sub-menu{
    	width: 200%;
    }
    
    #category-navigation ul.sub-menu li {
    	float: left;
    	width: 50%;
    }

    Regards,

    ThemeGrill Support Team.

    #1300207

    iaudify1
    Participant

    Thank you. @ashishsthanp @ThemeGrillSupportTeam, code worked fine in spliting sub cat menu into 2. only the “category-navigation .menu-item-has-children >” that did not take effect.
    thanks again.

    #1300412

    Nima
    Moderator

    Hello @iaudify1,

    In the above provided code “.category-navigation .menu-item-has-children > a:after” here please replace the front . code with the # code like this “#category-navigation .menu-item-has-children > a:after“. Hope this works for you.

    Regards!
    ThemeGrill Support Team

    #1300472

    iaudify1
    Participant

    it did the job. thanks abunch

    #1300652

    Nima
    Moderator

    Hello @iaudify1,

    Nice to know your issue is resolved.
    We would really appreciate if you could provide a review here:
    https://wordpress.org/support/theme/estore/reviews/?filter=5

    Regards! 🙂
    ThemeGrill Support Team

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.