How to adjust menu and font for mobile?

Sparkling
1

Thank you for the great theme, but I am stuck with mobile optimisation.
I would like the main navigation menu to collapse to the mobile menu at around 1020px screen size as it currently goes onto 2 lines when viewed on an ipad.
Also, I am trying to change the post title font size so that on mobile it doesn’t show up so large.
I have tried using

@media (max-width: 767px)
.entry-title {
    font-size: 18px;
}

in the child theme style.css and also in the custom css but nothing changed.
Help with what I would need to do or add to solve these would be great, thanks.

2

Code that you are using to resize font size won’t work because you have forget to add opening and closing curly brackets. The correct code should be like this:

@media (max-width: 767px) {
	.entry-title {
	    font-size: 18px;
	}
}

Changing menu breakpoints is a bit tricky and it might require some more tweaking from your side to make it look perfect but the basic idea would be like this:

@media (max-width: 1020px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Add both code snippets to Theme Options - Other - Custom CSS.

3

Thank you so much! :slight_smile: :slight_smile:
Perfect advice for helping me to solve my issues.

4

This was fantastic advice, as i just had to change the 1020 to 980 and now my menu is perfect :slight_smile:

Thanks
Aaron