Tag Archives: css

CSS Tips

Posted on by
Reply

Here is some simple CSS code snippets that I have found useful.

Disable over scroll effect

html {
  overscroll-behavior: none
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Radial gradient to cover all of the background

html {
  width: 100vw;
  min-height: 100vh;
  background: radial-gradient(#676767, #232323);
}

Overlay that blurs and dims background

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 7;
}

Add a Button/Change Menu Item Color to WordPress Menu Bar

Posted on by
Reply

The following article was helpful in getting started adding a button to the WordPress menu bar.

https://www.wpbeginner.com/wp-tutorials/how-to-add-a-button-in-your-wordpress-header-menu/

Modifying a Menu Item on a WordPress theme is not too difficult. The basic steps are

  1. Add Menu Item
  2. Add CSS Class to specific menu item
  3. Customize the new CSS class by using the Additional CSS Options

Add Menu Item

Add or customize a menu item by going to Appearance -> Menu

Add a CSS Class to Menu Item

You can add a CSS class to an existing menu item, or you can create a new menu item.

  1. Create Menu Item
  2. Select Screen Options
  3. Enable CSS Classes. (Needed for the next step)
  4. Under the Menu option, set a CSS class. (Name it something unique so it doesn’t interfere with other CSS classes. We’ll configure the CSS in the next step)

Customize CSS

Now we can setup and customize the CSS class by going to Appearance -> Customize

Now find where the “Additional CSS” setting is. If it is not under the main list, try looking under “Advanced”. The Additional CSS editor page should look like the following.

Once there, add all the CSS you want to change color, padding, etc.

You can make it look like a button by adding things like

border-radius: 5px;
padding: 0.5rem;
margin: 0.2rem;

Check out the following link for more info about buttons.

https://www.w3schools.com/csS/css3_buttons.asp