Also cek the bootstrap navigation on cell phone: www.advance-web-studio.com

I would like to decrease the height for each navigation item but how?

Each navigation item looks too big.

Thanks in advance.

Resize your browser window to narrow and then use inspect element (dev tools) to find the element and its CSS that's causing that extreme height.

You can write your custom media queries and inside them you decrease the height of your menu items. Example:

a. iPhone 2G, 3G, 4 and 4S in portrait and landscape view
@media only screen
and (min-width : 320px)
and (max-width : 480px) { /* Put Styles Here */}

b. iPhone 2G, 3G, 4 and 4S in portrait orientation
@media only screen
and (min-width : 320px)
and (max-width : 480px)
and (orientation : portrait)
{ /* Put Styles Here */}

c. iPhone 2G, 3G, 4 and 4S in landscape orientation
@media only screen
and (min-width : 320px)
and (max-width : 480px)
and (orientation : landscape)
{ /* Put Styles Here */}

d. iPhone 5 and 5S
@media only screen
and (min-width : 320px)
and (max-width : 568px)
{ /* Put Styles Here */}

e. iPhone 6 and 6 Plus
@media only screen
and (min-width : 414px)
and (max-width : 736px)
{ /* Put Styles Here */}

f. All iPads
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
{ /* Put Styles Here */}