How to Use Up More Avaliable Space In Header

Hi

I have noticed when the website goes to a width less than 1025px it switches over to a mobile friendly view where the text menu is replaced by a the menu icon. As we know desktop screens are relatively quite big compared to about a decade ago and I would to spread the site title, site headline and the text menu across more of the width of the screen. I was playing around with some CSS and I set the following:

@media only screen and (min-width: 1900px) {
	.header-wrap .container, #sidebar-footer .container {
		width: 1750px; 
	}
}

I would like to replicate something similar to this.

Problem is the “[TSN]” of the site title keeps moving down to a second line; I could reduce the size but I still feel this will keep behaving the same. This also happens to the text based menu if there is a lot on it.

Many thanks

Will

https://thesurgenetwork.net

Hello Will,

I’m not sure what exactly you want to achieve, can you please describe it more precisely?

Kind Regards, Roman.

Hi Roman

I would like to put the site title onto one line on small width screens and then when the screen becomes wider the header, footer and the content in the middle of the page spreads out wider. If I remember correctly it’s the ‘.container’ class. In simple terms I would like to decrease the left and right padding/margin for viewers using wider screens. I hope that make sense. Please don’t hesitate if you have any further questions.

Many thanks

Will

Will, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (min-width: 1366px) {
    .container {
        width: 1280px;
    }
}

@media (min-width: 1440px) {
    .container {
        width: 1366px;
    }
}

@media (min-width: 1680px) {
    .container {
        width: 1440px;
    }
}

@media (min-width: 1920px) {
    .container {
        width: 1680px;
    }
}

.container .panel-grid {
    max-width: initial;
}

@media (min-width: 992px) and (max-width: 1440px) {
    .col-md-4.col-sm-8.col-xs-12,
    .col-md-8.col-sm-4.col-xs-12 {
        width: 50%;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you for the reply Roman.

The code you provided was a brilliant start but I’ve tweaked your code very slightly to the following:

.comment-meta .fn,
.comment-metadata {
		margin-left: 0px;
}
#comments .fn, #comments .fn a {
	color: gold;
}

@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

@media (min-width: 1280px) {
    .container {
        width: 1200px;
    }
}

@media (min-width: 1366px) {
    .container {
        width: 1280px;
    }
}

@media (min-width: 1480px) {
    .container {
        width: 1366px;
    }
}

@media (min-width: 1540px) {
    .container {
        width: 1480px;
    }
}

@media (min-width: 1580px) {
    .container {
        width: 1540px;
    }
}

@media (min-width: 1780px) {
    .container {
        width: 1580px;
    }
}

@media (min-width: 1840px) {
    .container {
        width: 1780px;
    }
}

@media (min-width: 1880px) {
    .container {
        width: 1840px;
    }
}

@media (min-width: 1920px) {
    .container {
        width: 1880px;
    }
}

.container .panel-grid {
    max-width: initial;
}

@media (min-width: 992px) and (max-width: 1280px) {
    .col-md-4.col-sm-8.col-xs-12 {
        width: 42%;
    }
}
@media (min-width: 992px) and (max-width: 1280px) {
	.col-md-8.col-sm-4.col-xs-12 {
		width: 58%;
	}
}

.col-md-4, .col-sm-8, .col-xs-12 {
	padding: 0px 5px;
}

/*Reduce Spacing Between Each Menu Link*/
#mainnav li {
	padding: 0 10px;
}

When the screen goes to 768px the button menu icon and text becomes centralised. Is there a way to have the centralised styling for screen sizes between 768px and 1024px as seen below?

UPDATE
I’ve also noticed a bit of a bug. The menu goes off the screen. I’ve seen somewhere with Syndey Pro where the menu drops down to the left if there isn’t enough room on the right side.

Many thanks

Will

Hello Will,

It looks like these issues require some coding and testing because of your changes, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.

Hi Roman

Could I simply use the @media function alongwith the right CSS property like so:

@media only screen and (max-width: 1399px) {
		.site-header #mainnav ul li ul {
		    right: 14px;

The only thing I do need to ask is. Where can find documentation on how menu’s and sub menus work? I would like to learn about the ‘ul’ and ‘li’ properties. Can you recommend any useful resources please?

UPDATE
For testing purposes I’ve disabled all my custom code and taken away any code that my child theme could affect. I’ve made an extreme example with sub menus of sub menus whilst zooming in on the page as the .gif image shows below.

Many thanks

Will

Hello Will,

  1. I don’t think that there is such documentation, but you can learn HTML/CSS in order to understand submenu code.

  2. Try to add this CSS code:

.sub-menu {
    right: 0;
}

#mainnav .sub-menu .sub-menu {
    right: 100%;
    left: initial;
}

Kind Regards, Roman.