WordPress.org

Forums

Twenty Fourteen
Reduce Height of Sub Menu (4 posts)

  1. BestPriceDeal.in
    Member
    Posted 10 months ago #

    Hello Friends,
    I am using Twenty Fourteen theme. My Menu is too long and nobody able to see full menu. So that i need to reduce the height of sub menu.
    Please let me know how can i do this. where i need to change. I am not too much aware of HTML/CSS
    Website- http://bestpricedeal.in/

    br
    Vijay

  2. Maria Antonietta Perna
    Member
    Posted 10 months ago #

    Hi BestPriceDeal,

    I've looked at your website menu, and it's fully visible (at least in the desktop version, while there seems to be a problem with the mobile version).

    When you say you need to reduce the height, do you mean that you need to put fewer items in the sub-menu? In other words: would you like to remove some of the sub-menu links?

  3. BestPriceDeal.in
    Member
    Posted 10 months ago #

    Hello Maria,

    Thank you very much for your reply, Yes before your visit of my website I had been fixed it.
    But could not fix one things that is Sub menu's shown arrow. Now arrow is not in centre of sub menu.

    Also please let me know how it will be fit for Mobile version.

    Thanks in advance,
    Vijay

  4. ffitalia
    Member
    Posted 9 months ago #

    Hello, to reduce the space in menu modify padding value in style.css (or child theme)
    from

    .primary-navigation ul ul a {
    		padding: 18px 12px;
    		white-space: normal;
    		width: 176px;
    	}

    to

    .primary-navigation ul ul a {
    		padding: 8px 8px;
    		white-space: normal;
    		width: 176px;
    	    }

    Change padding value with your preferred value

    For "center" arrow
    change top value, (from 20px to 10px in example) from:

    .primary-navigation .menu-item-has-children li.menu-item-has-children > a:after,
    	.primary-navigation .menu-item-has-children li.page_item_has_children > a:after,
    	.primary-navigation .page_item_has_children li.menu-item-has-children > a:after,
    	.primary-navigation .page_item_has_children li.page_item_has_children > a:after {
    		content: "\f501";
    		right: 8px;
    		top: 20px;
    	}

    to

    .primary-navigation .menu-item-has-children li.menu-item-has-children > a:after,
    	.primary-navigation .menu-item-has-children li.page_item_has_children > a:after,
    	.primary-navigation .page_item_has_children li.menu-item-has-children > a:after,
    	.primary-navigation .page_item_has_children li.page_item_has_children > a:after {
    		content: "\f501";
    		right: 8px;
    		top: 10px;
    	}

    View my site (frequentflyeritalia.com) for an example :)

Reply

You must log in to post.

About this Theme

About this Topic

Tags