Add spaces between words in menu

  • Hi everyone !

    i am trying to add spaces in between the different components of my menu (i think they look to close to each other)…i am new to wordpress and haven’t found the solution so far. Any idea ?

    Here is the link of my website : https://www.leblocnotes.com

    the code of my menu

    /* Menu */

    .menu-header {
    background: #ffffff;
    background: url(“li.menu-header {
    background: #ffffff;
    background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -moz-linear-gradient(center top , #FFFFFF 20%, #eeeeee 100%);
    background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -webkit-gradient(linear,left top,left bottom,color-stop(.2, #FFFFFF),color-stop(1, #FFFFFF)) !important;
    background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -o-linear-gradient(top, #FFFFFF,#eeeeee) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFFFFF, endColorstr=’#eeeeee’);
    border-color: #999999;
    border-style: solid;
    border-width: 2px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    -box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #777;
    font-size: 20px;
    line-height:18px;
    text-shadow: none;
    float:left;width:100%;
    }
    .menu-back {clear:both;background-repeat:repeat-y;box-shadow:0 1px 1px rgba(0,0,0,.05);}

    .menu-container {background:#ffffff;}

    ul.nav-menu {line-height:1; width: 100%; margin-bottom:0; }
    ul.nav-menu, ul.nav-menu * { list-style: none; margin-left:10px; }
    ul.nav-menu li { float: left;position: relative;display: block;}
    ul.nav-menu li:first-child {border-left:none;}
    ul.nav-menu li:last-child {border-right:none;}
    ul.nav-menu ul li { width: 100%; }
    brary/media/images/trans.png”) 0px -7px repeat-x, -moz-linear-gradient(center top , #FFFFFF 20%, #eeeeee 100%);
    background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -webkit-gradient(linear,left top,left bottom,color-stop(.2, #FFFFFF),color-stop(1, #FFFFFF)) !important;
    background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -o-linear-gradient(top, #FFFFFF,#eeeeee) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFFFFF, endColorstr=’#eeeeee’);
    border-color: #999999;
    border-style: solid;
    border-width: 2px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    -box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #777;
    font-size: 20px;
    line-height:18px;
    text-shadow: none;
    float:left;width:100%;
    }
    .menu-back {clear:both;background-repeat:repeat-y;box-shadow:0 1px 1px rgba(0,0,0,.05);}

    .menu-container {background:#ffffff;}

    ul.nav-menu {line-height:1; width: 100%; margin-bottom:0; }
    ul.nav-menu, ul.nav-menu * { list-style: none; margin-left:10px; }
    ul.nav-menu li { float: left;position: relative;display: block;}
    ul.nav-menu li:first-child {border-left:none;}
    ul.nav-menu li:last-child {border-right:none;}
    ul.nav-menu ul li { width: 100%; }

    And here is a link of a website which menu looks like what i would like to have :

    https://www.mylittleparis.com

Viewing 1 replies (of 1 total)

  • Hi Chloe,
    You can try adding:
    ul.nav-menu li {
    padding: 0 18px;
    }

    It looks like in your style sheet you currently have
    ul.nav-menu li {
    float:left;
    padding:0;
    position:relative;
    }
    instead of what you show above, so you’ll need to make sure you are overriding this. And make sure to do this through a child theme or custom CSS area so it doesn’t get overwritten with an update. Good luck!

Viewing 1 replies (of 1 total)
  • The topic ‘Add spaces between words in menu’ is closed to new replies.