Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add space between menu elements (in wordpress)?

I am working in wordpress and I have this menu with 4 menu items. The problem is that they are touching each other and there is 0 space between which makes it ugly in my opinion.

Now this problem only occurs in wordpress. So I have to find a solution how to put some space between.

Maybe you guys know a solution without having to install something on WP.

(the codes in the body is exactly as in my wordpress to demonstrate how it looks like. You can enter it and that will put some space between, but unfortunately that doesn't work in wordpress.)

<style>
  .smallmenu {
    margin: 0 auto;
    max-width: 436px;
    width: 100%;
  }

  .Capital {
    margin: 0px 0 -5px 0;
    line-height: 63px;
    font-size: 60px;
    font-weight: ligter;
  }

  .smalltext {
    text-align: center;
    margin-top: 0px !important;
    font-weight: 100px;
    font-size: 14px;
  }

  .smalltextpub {
    text-align: center;
    margin-top: 0px !important;
    font-weight: 100px;
    font-size: 14px;
    margin-left: -5px;
  }

  .cornermenu {
    display: inline-block;
    margin: auto;
    border-radius: 25px;
    background: #769DBD;
    padding: 20px;
    width: 100px;
    height: 100px;
    text-align: center;
    color: #fff;
    font-family: Arial;
    padding-top: 10px;
    text-decoration: none;
  }

  #hoverr:hover {
    border-radius: 25px;
    background: #464646;
    padding: 20px;
    width: 100px;
    height: 100px;
    text-align: center;
    color: #fff;
    font-family: Arial;
    padding-top: 10px;
    text-decoration: none;
  }

  * {
    box-sizing: border-box;
  }
</style>
<div class="smallmenu"><a id="hoverr" class="cornermenu" href="#methods"><span class="Capital">M</span>
<span class="smalltext">Methods</span></a><a id="hoverr" class="cornermenu" href="#background"><span class="Capital">B</span>
<span class="smalltextpub">Background</span></a><a id="hoverr" class="cornermenu" href="#results"><span class="Capital">R</span>
<span class="smalltext">Results</span></a><a id="hoverr" class="cornermenu" href="#publications"><span class="Capital">P</span>
<span class="smalltextpub">Publications</span></a></div>
like image 939
Lego Avatar asked Jan 01 '26 17:01

Lego


1 Answers

Just set a fixed margin on .cornermenu. Something like margin: 2px

JSFiddle link

 .cornermenu {
    ...
    margin: 2px;
    ...
  }
like image 195
Benjamin Gorman Avatar answered Jan 03 '26 07:01

Benjamin Gorman



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!