Dyad 2 – Changing header menu/site description appearance with CSS

waltwould · Member · Mar 20, 2018 at 6:24 pm
Copy link

Add topic to favorites
Hello,

Since my list of CSS questions all pertain to elements inside the site header, I thought it would be more convenient to include them in a single thread. (Mods, if you would prefer that I break up threads like this into separate posts in the future, please let me know!)

1. Formatting Site Description/Tagline
1a) I’m interested in changing the attributes of the site description, e.g. the font, font size, and color of the text. (I am familiar with HTML commands regarding text formatting, but am not sure how to target the site description with CSS).

1b) Is there a piece of code that will allow me to hide/display the Site Title and Site Description independently of each other? (e.g. if I click “Show Site Title and Description” in the “Customize” bar, can I then “hide” one of the elements with CSS?)

1c) Is it possible to insert a forced line break in the Site Description so that the text breaks at a specific point, regardless of the size of your browser window?

2. Opacity of Header Menu in Mobile/Tablet Version of Site
2a) When the site is viewed via Desktop, the Header Menu area is a darkened (but still somewhat transparent) stripe. When viewed in Mobile or Tablet, this stripe becomes opaque. Is there a way to change the opacity of this stripe? I would like it to be transparent like it is in Desktop mode.

2b) Alternately, is there a way to hide the stripe completely in Mobile/Tablet and just have the Site Logo and Header Menu appear atop the Header Image? (If accomplishing this means having the Header Menu and Site Description elements overlap, would there then be a way to turn off the Site Description JUST for Mobile/Tablet versions of the site?)

3. Changing Size of Site Logo
Can I increase the size (max boundaries) of the Site Logo inside the Header Menu using CSS?

The site I need assistance with is todayincthistory.wordpress.com, which is using the Dyad2 theme. Thank you all so much for your help!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 21, 2018 at 2:38 am
Copy link
Hi there, if you go to Customize > Fonts, you can set a Heading font from the list. That will also affect the post and page titles and any h1-h6 headings you happen to use in post and page content.

If you are wanting to change only the site title/site description, we are a bit more limited as you will only be able to use fonts that are common to the majority of computer systems. This is a good resource for those common fonts. The following changes the site description font to the Arial style sans-serif font, changes the font size and color. You can edit the settings as desired..
```
.site-banner h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: #69B1DC;
}
@media screen and (min-width: 1400px) {
  .site-banner h1 {
    font-size: 5.5rem;
  }
}
```
For the linebreak in the site description, not really but sort of. What you can do is to put replace the spaces between the words you want to be on the second line with a non-breaking space code, which will force the words to stay together. Edit your site title and put the following between the words you want on the second line without the space between the & and n.
& nbsp;
To hide the site title, this would be the CSS.
```
.site-title {
display: none;
}
```
And this to hide the site description.
```
.site-description {
display: none;
}
```

thesacredpath · Member · Mar 21, 2018 at 2:46 am

You can try this for the opacity change and hiding of the site description.

@media screen and (max-width: 960px) {
  #masthead {
    background-color: rgba(36,38,41,.4);
    position: fixed;
    top: auto;
  }
  .site-description {
    display: none;
  }
}

thesacredpath · Member · Mar 21, 2018 at 3:25 am
Copy link
On the logo, we can increase its size, but there are two CSS rules governing it’s size, one for screens 960px and narrower (basically tablets and phones) and then one for greater than 960px in screen/window width. Are you wanting to increase both?
waltwould · Member · Mar 21, 2018 at 1:45 pm
Copy link
Opacity Change and Hiding Site Description: This is a HUGE improvement — it looks so much better with the site description hidden on smaller screens! Question: Is there any way to increase the transparency of the header stripe even further? I played around and noticed that the “.4” value in the code your provided seems to control the opacity, and “.1” seems to be the lightest it can go. Is there any way to make it even lighter than this?

Formatting Site Description: Thank you! Changing the REM value in this bit of code doesn’t seem to have any effect on the size of the text, however. Is there something I’m missing…?

Logo Size: Increasing the logo size on Desktop screens is most important, but it would be nice to know how to do it for smaller screens as well, so I would be grateful for both pieces of code.

Removing decorative header element?
Thanks to the CSS you provided above, and using ‘Inspect Element’ on my browser, I was able to find out how to hide the 1px white lines that appear before and after the Site Description using the following code:
```
.site-banner-header.banner-description::before {
	display: none;
}

.site-banner-header.banner-description::after {
	display: none;
}
```
So, hooray for learning! However, there is still a thin, light blue rectangle that appears before the Site Description (in Desktop screens) that I would like to hide. I haven’t been able to find its ID using my browser’s Element Inspector, so I am at a loss – any help with ID’ing this decorative element would be greatly appreciated.
thesacredpath · Member · Mar 21, 2018 at 9:11 pm
Copy link
Yes, the .4 is the opacity of the background color. You can go with two or three digits, such as .04, but once you get under .1, the change gets very subtle as not all monitors and browsers can display that low level well.

Looking at things again though, I seemed to have targeted the wrong CSS selector for the opacity/background-color change. Replace the 960px media query with this and I believe things will be much better for you.
```
@media screen and (max-width: 960px) {
 #masthead {
  position:fixed;
  top:auto
 }
  .site-header:before {
    background: rgba(0,0,0,.2);
  }
 .site-description {
  display:none
 }
}
```
On the font size you didn’t miss anything, that had worked for me in testing, but didn’t when I tried it again. Use this instead.
```
.site-banner h1 {
  font-size: 3.5rem !important;
}
```
Making the logo larger gets a bit involved. If we make it larger, then the transparent dark area overlaps the site description even more than it does now The following will make the logo larger on screens 960px and wider, and I’ve also moved the site description down so that it isn’t obscured partially behind the transparent overlay.
```
@media screen and (min-width: 960px) {
  .site-branding .custom-logo-link img {
    max-height: 100px;
  }
  .banner-custom-header .site-banner-header {
    padding-bottom: 0;
  }
}
```
For smaller screens, you can use this.
```
@media screen and (max-width: 959px) {
  .site-branding .custom-logo-link img {
    max-height: 120px;
  }
}
```
For the blue rectangle above the site description, this will hide it.
```
.banner-custom-header .site-banner-header h1::before {
  display: none;
}
```
There is also a line below the site description, and the following would hide that, if you wish.
```
.site-banner-header::after {
  display: none;
}
```
waltwould · Member · Mar 22, 2018 at 3:09 pm
Copy link
Small screen header opacity: Perfect!! This is exactly the layout/look we were hoping for on small screens. I found out I can also change the opacity of desktop screens with that same code if I change the @media screen width to “min-width: 960px” instead of “max-width.” Thank you!

Removing small blue rectangle + Changing Font Size of Site Title/Description: Both are perfect. Great.

Increasing Logo Size: The small screen code works perfectly. When I insert the code for Desktop screens, the Site Description does move down, but nothing seems to happen to the logo size.

Thank you as always for your help!
thesacredpath · Member · Mar 22, 2018 at 7:13 pm
Copy link
In the 960px min-width media query, did you edit the 100px max-height value? 100px is what it was originally, sorry for not mentioning that. Add that rule back in and increase the 100px to 120px and the logo will enlarge.

One of the issues on desktop you will run into, is anything greater than 120px, and we run out of room for the site description and the translucent grey area starts to overlap it.

There are some options on increasing the height of the image area so the site description would not be overlapped, but that gets a bit tricky and we start to build a house of cards that could cause other issues.
waltwould · Member · Mar 23, 2018 at 3:28 pm
Copy link
Thank you — that was precisely it. I hadn’t realized that I had to change the 100px value, which was the current (default) setting. I greatly appreciate your warnings on not increasing the size too much, as well. Duly noted!

Pretty sure this wraps up every question I had in this thread! Thank you ever so much for your thorough help.
thesacredpath · Member · Mar 23, 2018 at 6:23 pm
Copy link
Hooray and you are welcome! Let us know if you have additional questions or problems. :)
hinefuku · Member · Mar 30, 2018 at 11:26 pm
Copy link
This is a related question. Instead of deleting the blue rectangle, how could we change the color to #C8102E?
staff-zinnia · Staff · Mar 31, 2018 at 4:56 pm
Copy link
Hi hinefuku –

From your WordPress.com dashboard you need to open up the Customizer tab and click on the CSS option.

Find the code, replace the color with the one that you want. Easy peasy :)

The topic ‘Dyad 2 – Changing header menu/site description appearance with CSS’ is closed to new replies.

Dyad 2 – Changing header menu/site description appearance with CSS

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media