Navigation item height on laptop

Hi there,

The newer generation of laptop screens, the ones w/ higher resolution, share CSS with desktop settings as they have the same viewport breakpoint.

But perhaps I'm missing what you meant.

Can you share us screenshots of what you perceive as difference between what you saw w/ desktop screens and a laptop screen?

Sorry, i meant tablet.

i'm actually having custom breakpoints.

you can see here the design: the menu links have differents border height on desktop - laptop/tablet

Hi there,

there isn't a specific control for defining 'header heights' ( that is expressed by Padding, and the Height of the header contents ). To adjust those specifically for a portrait tablet view would require CSS.

If you have the site setup and can share a link we can assist with the CSS to adjust it.

Yes, here it is.

The menu border needs to be smaller, at 30px on laptop/tablet.

Hi Mohammed,

As you can see the green part is the padding added to the header.
https://www.screencast.com/t/o7qHilrXL

Go to customizer > layout > header, reduce the padding from there.

Let me know if this helps :)

Thanks Ying,

but you didn't get apparently the issue. It's the individual menu item height that want to adjust, not the padding. Adjusting the inside header padding is not adjust the menu item height.

I applied height on .menu-item-id , but the link goes to the bottom.

I'm still looking forr the issue.

the issue is apparently with alignment.

I just added display flex, align-item: center.

Just to know that by the default it's not centering. You have to adjust that with CSS

I'm still not fully understand what your issue is, are you just trying to achieve the design you linked?

If so, try this CSS:

@media (min-width: 1025px) {
.main-navigation li {
    border-left: 1px solid grey;
}
.main-navigation li:last-child {
    border-right: 1px solid grey;
}
/*SHOPPING CART*/
.main-navigation .menu-bar-items {
    border-right: 1px solid grey;
}
}

If you want the border to be shorter, then go to customizer > primary navigation, reduce the Menu Item Height.

the laptop/tablet version have shorter height border. You can't actually fix that in the customizer, it's only for one device.

So you have to adjust the menu-item manually with CSS. But you also have to manually align center.

You should target the <a> element with your CSS and set its line-height:

@media (max-width: 1535px) and (min-width: 1025px) {
    .main-navigation .main-nav ul li a {
        line-height: 30px;
    }
}