html - How to add space between menu elements (in wordpress)? -
i working in wordpress , have menu 4 menu items. problem touching each other , there 0 space between makes ugly in opinion.
now problem occurs in wordpress. have find solution how put space between.
maybe guys know solution without having install on wp.
(the codes in body in wordpress demonstrate how looks like. can enter , put space between, unfortunately 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>
just set fixed margin on .cornermenu. margin: 2px
https://jsfiddle.net/cd19t3gk/
.cornermenu { ... margin: 2px; ... }
Comments
Post a Comment