How to center the top-horizontal-menu?

[eugenefedoto]

http://i.imgur.com/dE6sU4m.png

[eugenefedoto]

My solution:

 

1) Remove .sf-contener from the div element that has #block_top_menu. I removed it because I don't need the clear: both property.

 

2) Add in your own custom style sheet to the #block_top_menu:

margin-left: auto;

margin-right: auto;

width: {you have to enter your personal value here}; // See the bottom note.

 

Note: I let my browser figure out the width. In my screenshot it's 560.484px. So that's the width I set it to in my style sheet. If you don't set it, by default it's set to 100% value (this actually fills up the width up to the container, which is why I have it disabled in my screenshot). So I disabled the 100%, and now it's defaulted to width: auto. This calculates the smallest width necessary. Margin-left: auto and margin-right: auto need a specific width value, and they don't work when the width is set to auto. 

 

Summary for width: turn off the 100% width, so it becomes auto and fits your content. Then use that exact width value that auto gets you in your style sheet.

Edited October 3, 2015 by eugenefedoto (see edit history)

[temmyazeezcouture]

  what i will like to achieve center my topmenu but with auto width category

 

there is no #block_top_menu after my sf-contener

 

 

{if $MENU != ''}

 

<!-- Menu -->

<div class="sf-contener clearfix">

<ul class="sf-menu clearfix">

{$MENU}

{if $MENU_SEARCH}

<li class="sf-search noBack" style="float:right">

<form id="searchbox" action="{$link->getPageLink('search')|escape:'html'}" method="get">

<p>

<input type="hidden" name="controller" value="search" />

<input type="hidden" value="position" name="orderby"/>

<input type="hidden" value="desc" name="orderway"/>

<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

</p>

</form>

</li>

{/if}

</ul>

</div>

<div class="sf-right"> </div>

 

<!--/ Menu -->

{/if}

 

i have also upload #blocktopmenu.php and #blocktopmenu.tpl to this reply so that you can view it so that i can know which modification will be applicable to me . My website is aso-iyi.com

 

My other complains if you can help i will appreciate

 

 

Picture 1: The Horizontal icon i want to move it up a bit and also reduce is font height .How can i move it up  & resize the font category in such a way that if i list 10 products it will apply auto width so that it wont have to list the remaining category in second line as it did in the picture i attached below? i will like as soon as my site is open through a desktop version. I want my advert slide pictures to show in full instead of half so that you have to scrow down before you can see it fully.

 

the bookmark icon at the  right bottom end of the horizontal bar. i want shift it left a bit to be properly align

 

 

 

 

 

 

Picture3 : I want the Newsletter icon to display as soon as my website is open www.aso-iyi.com then also it should have atleast 10 seconds timing before customers can click to close it incase they are not interested in receiving update about latest product from me.

 

At the follow us at the right bottom end of the page. the instagram icon is not displaying it and i had configure at the BO.

 

picture 4:  I want the customer address form to be align at the center of the page instead how it is now which is at the left end corner of the form. I want to ad

 

Picture5 : i want to set carrier price for city & state address of goods. even now that i have import states into my country. I have checked the localization & other directory of my BO didnt find where i can import city and state into carrier price range setting so that i can set different delivery price for different city within a state. Also different shipping price for different states within a country

 

 

I want to add free paypal module .i cant find it at the module list

Edited December 6, 2015 by temmyazeezcouture (see edit history)

[temmyazeezcouture]

my files that i side that i have check for the horizontal menu codes

 

#superfish-modified.css

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

  margin-right: 14px;

  float: right;

  width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #383838;

}

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

border-right: 1px solid #777;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

 

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:34px;

border: 0;

text-decoration:none;

}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/

color: #fff;

white-space:nowrap;

}

.sf-menu li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu li li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

  background: #4E4E4E;

}

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #4e4e4e;

outline: 0;

}

/*** arrows **/

.sf-menu a.sf-with-ul {

padding-right: 2.25em;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator {  /* give all except IE6 the correct values */

top: 11px;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

 

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}

 

/*** shadows for all but IE6 ***/

.sf-shadow ul {

background: url('../img/shadow.png') no-repeat bottom right;

padding: 0 8px 9px 0;

-moz-border-bottom-left-radius: 17px;

-moz-border-top-right-radius: 17px;

-webkit-border-top-right-radius: 17px;

-webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

background: transparent;

}

li.sf-search {

  background: inherit;

  float: right;

  line-height: 25px;

}

li.sf-search input {

  -moz-border-radius: 0 5px 5px 0;

  padding: 3px 0;

  padding-left: 20px;

  margin: 6px 6px 0 0;

  background: #fff url('../img/search.gif') no-repeat left center;

  border:1px solid #777

}

 

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width:200px;

background:#726f72 !IE;

}

 

blocktopmenu.php