Center Mobile Menu for Tablet View

Hi

From 767px and below the centralised mobile menu activates and I was hoping I could also apply this to the tablet view from 768px - 1204px?

Below is the width expanded to 1024px and the menu is in the top right corner.

This screenshot below is the mobile view with a width shrunk down to 767px. I want to apply the centralised menu to the tablet view.

How would I achieve this please?

Many thanks

Will
https://thesurgenetwork.net

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 768px) {
      .site-header .col-md-4,
      .site-header .col-md-8 {
        width: 100%;
      }
      .site-header .col-md-4 {
        text-align: center;
        margin-bottom: 10px;
      }
      .btn-menu {
        float: none;
        display: block;
        width: 28px;
        margin-left: auto;
        margin-right: auto;
      }
    }

Regards,
Kharis

Hi Kharis

The code works when the width comes down to the tablet view but the hamburg icon is now appearing on the desktop view as shown below.

I fixed it by removing the ‘display: block’ property. However, the desktop menu between 1024px and 1200px the menu jumps onto to one line.

This is the CSS I have applied so far

@media only screen and (min-width: 768px) {
	.site-header .col-md-4,
	.site-header .col-md-8
	{
		width: 100%;
	}
}

@media (min-width: 980px) and (max-width: 1280px) {
	.site-header .col-md-4.col-sm-8.col-xs-12 {
		width: 100%;
	}
	.site-header .col-md-8.col-sm-4.col-xs-12 {
		width: 100%;
	}
}

.btn-menu {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

Any idea?

Kind regards

Will

UPDATE

After tweaking the code slightly with this

@media only screen and (min-width: 768px) {
	.site-header .col-md-4,
	.site-header .col-md-8
	{
		width: 100%;
	}
	.site-header .col-md-4 {
		text-align: center;
		margin-bottom: 10px;
	}
}
@media (min-width: 1024px) {
	.site-header .col-md-4.col-sm-8.col-xs-12 {
		width: 42%;
	}
	.site-header .col-md-8.col-sm-4.col-xs-12 {
		width: 58%;
	}
}

@media (max-width: 1024px) {
	.site-header .col-md-4.col-sm-8.col-xs-12 {
		width: 100%;
	}
	.site-header .col-md-8.col-sm-4.col-xs-12 {
		width: 100%;
	}
}
.btn-menu {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

It seems have fixed it. Is the code I have above on the UPDATE the efficient way of doing it?

I am sorry for the trouble.

Try replacing the code I suggested here with this one:

    @media only screen and (max-width: 768px) {
      .site-header .col-md-4,
      .site-header .col-md-8 {
        width: 100%;
      }
      .site-header .col-md-4 {
        text-align: center;
        margin-bottom: 10px;
      }
      .btn-menu {
        float: none;
        display: block;
        width: 28px;
        margin-left: auto;
        margin-right: auto;
      }
    }

Regards,
Kharis

Hi Kharis

I tried your code but between 768px and 1024px wide the menu stays over on the left. The code below is modified version of your first code and it seems to work. If you think that the code is fine I’ll stay with my CSS and I can mark this question as solved.

@media only screen and (min-width: 768px) {
	.site-header .col-md-4,
	.site-header .col-md-8
	{
		width: 100%;
	}
	.site-header .col-md-4 {
		text-align: center;
		margin-bottom: 10px;
	}
}
@media (max-width: 1024px) {
	.site-header .col-md-4.col-sm-8.col-xs-12 {
		width: 100%;
	}
	.site-header .col-md-8.col-sm-4.col-xs-12 {
		width: 100%;
	}
}
@media (min-width: 1024px) {
	.site-header .col-md-4.col-sm-8.col-xs-12 {
		width: 42%;
	}
	.site-header .col-md-8.col-sm-4.col-xs-12 {
		width: 58%;
	}
	.site-header .col-md-4 {
		text-align: left;
	}
}
.btn-menu {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

Kind regards

Will

Hello Will,

Your final code looks better. You can go with it.

I found another issue on other place. See the below screenshot:

I think the site’s description font size need to be down resized on smaller screen. Try adding this CSS code:

    @media only screen and (max-width: 480px) {
        .site-title,
        .site-description {
          font-size: 20px !important;
        }
    }

You’d do your own size value adjustment if needed.

Regards,
Kharis

I am going to close this topic as it has been resolved. Please let us know in a new topi if you have any other else we can help. Avoid asking multiple questions in one topic. Because it’ll make us hard tracking the progress.

Regards,
Kharis