WordPress.org

Support

Support » Themes and Templates » Twenty Fourteen » Reduce Height of Sub Menu

Reduce Height of Sub Menu

  • 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

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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?

    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

    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 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reduce Height of Sub Menu’ is closed to new replies.
Skip to toolbar