Style navigation

Try out this custom CSS:

.collection-type-blog .pagination {
    border: none;
    font-size: 20px;
    line-height: 30px;
}

We need to increase the line-height because with larger font-sizes on mobile styling the overflow: hidden rules will cut off the bottom of letters like "g" and "y" (screenshot below). Setting an explicit line-height fixes this.

@mathildeeeeee I see on tablet, the menu doesn't look good, contact us break in new line

You can add this to Design > Custom CSS to solve

@media screen and (max-width:900px) and (min-width:641px) {
.main-nav ul {
    padding: 0 !important;
}
.main-nav li {
    font-size: 12px;
    margin-left: 10px;
}
}

17 hours ago, mess_cal said:

Try out this custom CSS:

.collection-type-blog .pagination {
    border: none;
    font-size: 20px;
    line-height: 30px;
}

We need to increase the line-height because with larger font-sizes on mobile styling the overflow: hidden rules will cut off the bottom of letters like "g" and "y" (screenshot below). Setting an explicit line-height fixes this.

 

@mess_cal Amazing!! Thank you so much!! 

15 minutes ago, tuanphan said:

@mathildeeeeee I see on tablet, the menu doesn't look good, contact us break in new line

You can add this to Design > Custom CSS to solve

@media screen and (max-width:900px) and (min-width:641px) {
.main-nav ul {
    padding: 0 !important;
}
.main-nav li {
    font-size: 12px;
    margin-left: 10px;
}
}

@tuanphan thank you for that! Looks much better now!!