.a button links

• 

  manifest828 · Member · Oct 7, 2018 at 7:23 pm

  • Copy link
  • Add topic to favorites

  This should be an EASY fix for anyone who knows what he is doing.

  I am having problems getting navigation menu #11 to match a .block class “buttons” I put in CSS. I decided that it would be easier to use a navigation menu so that current page highlights.

  On the left column of

  https://manifest828.com/michaela-stone-season-1/

  you will see the block “buttons” I created.

  Just below them is the Navigation Menu # 11.

  PLEASE HELP ME WITH: I would like those to match what I did for the .block buttons above. I can’t seem to get rid of the black border.

  CSS for the .block:

  .block {
  display: block;
  border-radius: 25px;
  width: 100%;
  border: none;
  background-color: #212a3c;
  color: white;
  padding: 10px 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  margin-top: 18px;
  }

  .block a {
  color: white;
  }

  .block:hover {
  background-color: #537691;
  color: black;
  }

  CSS for Navigation #11 menu:

  #nav_menu-11 a:hover {
  background: #537691;
  color: #ffffff;
  border-radius: 25px;
  padding: 0px;

  }

  #nav_menu-11 ul li {

  border-radius: 25px;
  width: 100%;
  border: none;
  padding: 10px 18px;
  background-color: #212a3c;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  margin-top: 18px;
  }

  #nav_menu-11 a {
  color: white;
  }

  #nav_menu-11 ul {
  list-style: none;
  padding: 0px;
  }

  #nav_menu-11 .current-menu-item a {
  background: #537691;
  border: none;
  border-radius: 25px;
  padding: 7px 7px;
  }

  Thanks for anyone who can help me.

  The blog I need help with is: (visible only to logged in users)

• 

  manifest828 · Member · Oct 7, 2018 at 11:37 pm

  • Copy link

  Okay, after a couple of more tries, I think I figured it out. But I need someone to please check my work.

  I replaced all the padding properties with

  line-height: 2.3;

  and took out some other code. Here is what I ended up:

  #nav_menu-11 a:hover {
  background: #537691;
  color: #ffffff;
  border-radius: 25px;
  }

  #nav_menu-11 ul li {
  border-radius: 25px;
  width: 100%;
  line-height: 2.3;
  background-color: #212a3c;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  margin-top: 18px;
  }

  #nav_menu-11 a {
  color: white;
  }

  #nav_menu-11 .current-menu-item a {
  background: #537691;
  border-radius: 25px;
  line-height: 2.3;
  }