Center my menu text

  • Resolved NAIJADEALZ

    (@naijadealz)


    12 years, 7 months ago

    Hi,

    Please help with the menu bar here.

    I’d like to centralise the menu item, the text currently look unevenly spaced.

    CSS is shown below.

    /* =============================================================================
   Header
   ========================================================================== */

	#header {   height:130px;overflow:hidden; background:#fff;width: 960px; }
	#logo {width: 960px;margin-top: 5px;float:right;}
	.hpages { height:30px; }
 	#banner { padding:0px;  width:510px; }
	#banner img { float:right; } 

/* =============================================================================
   menu + sub menu
   ========================================================================== */

	.menu {background: transparent;height: 55px; margin-top:1px; }
	.menu li a { color: #fff;font-size: 16px;margin-left: 1px;margin-right: 1px;display:inline-block;text-align:center;}
	.menu li {  min-height:50px;  background: none;}
	.menu li hover{  color: #880000;}
	#SearchForm .searchBtn {background: url(../images/search.gif) no-repeat;}
#submenubar {background: transparent;   padding:0px; margin-top:10px; display:none;}
	#s { margin-left:0px; font-size: 20px;   }
	.AdvancedSearchBox { background:#fff; }

    Please help.

    Thank you

Viewing 12 replies - 1 through 12 (of 12 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    To modify CSS of themes, first create a Child Theme or use a Custom Style/CSS plugin. Let us know when you have either.

    Thread Starter NAIJADEALZ

    (@naijadealz)

    Hi Andrew,

    I have a child theme, under the couponpress premium theme i’m using.
    the above code is from my child theme.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Okay.

    I’d like to centralise the menu item

    Which menu item would you like centred?

    Thread Starter NAIJADEALZ

    (@naijadealz)

    This main menu here.

    The menu items look unevenly spaced.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I can only see a difference in spacing between the last menu item, ‘Home’ and ‘My Account’, also perhaps left of ‘My Account’ there is greater space.

    Is this what you’re referring to?

    Thread Starter NAIJADEALZ

    (@naijadealz)

    Yes Andrew.
    Without the ‘Home’ item, the menu text just ends abruptly after “My account”.

    What I’d like is for the items to be spaced evenly and the space adjusted accordingly.

    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try adding this CSS to your Child Theme style.css;

    .menu li {
 text-align: left;
}

    Edit: Now I’m understanding your main issue about centring.
    You cannot set the navigation to automatically centre regardless of the number of menu items.

    Can you confirm the menu will not increase nor decrease in menu items?

    Thread Starter NAIJADEALZ

    (@naijadealz)

    Yes, it will not decrease or increase in menu items.

    Left align increases the space on the right side of the menu, after home. Right align reduces that space somewhat, but it is still not good-looking.

    Justify like is done in Microsoft Word is what I have in mind.

    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you want something like this
    https://awesomescreenshot.com/0bddunbcc

    Thread Starter NAIJADEALZ

    (@naijadealz)

    Hi Andrew, sorry for the late response.

    The screenshot looks good. Thanks.

    How can i achieve that?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    On the .menu li remove:
    – padding right
    – padding left
    – text align center
    – min width

    On the .menu li add:
    – margin-right: 40px

    Thread Starter NAIJADEALZ

    (@naijadealz)

    thanks a lot Andrew.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Center my menu text’ is closed to new replies.