So I have looked everywhere to try and find out how to change the text size for the text on the jumbotron as well as the site title which is under site identity and is the header text for individual pages. Can someone PLEASE help thank you so much in advance!
I don’t work here, but I’m pretty sure this will help…
You have to override the css.
if you go into appearance, Edit CSS and paste this code - you can change the settings for the jumbotron text… replace the 00 with the font size you want. The size it is now is 81px. You can change the other settings too.
#header .bottom-header h2 {
margin: 0 0 50px;
line-height: .74;
font-weight: 900;
font-size: 00px;
color: #ffffff;
text-transform: uppercase;
}
Will this work on the jumbotron page as well as the individual pages? Thank you!!
That’s just the css for the jumbotron. I’m not sure which css controls the header size for the additional pages, but if you look inside the layout folder, css, main.css - you can see all the css settings. I’ll paste all the header settings here. You can paste them all into the “Edit CSS” page and try changing a few font sizes and see which ones change the items you want changed. I figure a lot of stuff out by trial and error. Good luck.
Here’s all the header css:
#header {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header .top-header {
width: 100%;
padding-top: 40px;
}
#header .top-header .header-logo {
display: block;
font-size: 38px;
color: #ffffff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
float: left;
}
#header .top-header .header-logo:hover {
color: #f1d204;
text-decoration: none;
}
#header .top-header .header-navigation {
float: right;
}
#header .top-header .header-navigation ul {
width: 100%;
margin: 35px 0 0 0;
padding: 0;
list-style-type: none;
}
#header .top-header .header-navigation ul li {
margin-left: 40px;
line-height: 1.375;
font-weight: 700;
font-size: 16px;
color: #ffffff;
text-transform: uppercase;
position: relative;
float: left;
}
#header .top-header .header-navigation ul li:first-child {
margin-left: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children a {
padding-right: 16px;
position: relative;
}
#header .top-header .header-navigation ul li.menu-item-has-children a:after {
content: “\f0d7”;
font-family: “FontAwesome”;
font-size: 16px;
position: absolute;
top: 0;
right: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu {
width: 250px;
margin: 0;
padding: 10px 0 0 0;
position: absolute;
left: 0;
display: none;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li {
width: 100%;
margin: 0;
padding: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:first-child a {
padding-top: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:last-child a {
padding-bottom: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a {
width: 100%;
background-color: #ffffff;
margin: 0;
padding: 5px 10px;
line-height: 1.6;
font-weight: 600;
font-size: 16px;
color: #333333;
text-transform: none;
display: block;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a:hover {
color: #f1d204;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a:after {
display: none;
}
#header .top-header .header-navigation ul li a {
color: #ffffff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#header .top-header .header-navigation ul li a:hover {
color: #ffde00;
text-decoration: none;
}
#header .bottom-header {
width: 100%;
padding-top: 240px;
padding-bottom: 280px;
text-align: center;
}
#header .bottom-header.blog {
padding: 130px 0;
}
#header .bottom-header.blog p {
margin-bottom: 0;
}
#header .bottom-header h2 {
margin: 0 0 50px 0;
line-height: 0.74;
font-weight: 900;
font-size: 81px;
color: #ffffff;
text-transform: uppercase;
}
#header .bottom-header span.span-dot {
color: #ffde00;
}
#header .bottom-header p {
line-height: 1.6;
margin-bottom: 60px;
font-size: 15px;
color: #ffffff;
}
#header .bottom-header .header-button-one {
width: auto;
height: 63px;
line-height: 57px;
background: rgba(255, 255, 255, 0.2);
margin: 0 15px;
padding: 0 70px;
display: inline-block;
border: 3px solid #ffffff;
border-radius: 3px;
font-weight: 700;
font-size: 18px;
color: #ffffff;
text-transform: uppercase;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#header .bottom-header .header-button-one:hover {
background: rgba(255, 255, 255, 0.1);
text-decoration: none;
}
#header .bottom-header .header-button-two {
width: auto;
height: 63px;
line-height: 63px;
background: #f1d204;
margin: 0 15px;
padding: 0 70px;
display: inline-block;
border-radius: 3px;
font-weight: 700;
font-size: 18px;
color: #ffffff;
text-transform: uppercase;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#header .bottom-header .header-button-two:hover {
background: rgba(241, 210, 4, 0.9);
text-decoration: none;
}
I just tested it and it looks like it controls both. Anyway to control them separately? Thanks!!
You are the best. I will find it! Thanks!!
Dang, looks like the css controls both the static jumbo and the individual page jumbotron text. Go figure. I wonder if there is a way to make each of them a different size.
That’s way over my head. Sorry. 
You’d have to dig in to the php to change the names of things in order for the css to be applied differently…that’s when things start to break.
Haha mine too! Thank you for getting me this far!
Hello @a98cr125 and thanks @marcee for the help so far.
You can use a CSS selector to use the styling on homepage or page.
Just add .home or .page in front of the CSS selector
Example:
.home #header .bottom-header h2 {
margin: 0 0 50px;
line-height: .74;
font-weight: 900;
font-size: 00px;
color: #ffffff;
text-transform: uppercase;
}
I hope this is what you were looking for.
Regards