Top Horizontal Menu Alignment

[ImperialTrader]

Good Morning

 

I need to align the top horizontal menu to the middle instead of floating it to the left by default

 

Any ideas or suggestions?

 

Edited December 6, 2014 by ImperialTrader (see edit history)

[Paulito]

Hello

 

You need to go to super-fish modified.css

and around Line 13 

 

.sf-menu {

  text-align:center;      (Add This)  (it was position:relative;)

  padding: 0;

  width: 100%;

  border-bottom: 3px solid #e9e9e9;

  background: #f6f6f6; }

  @media (max-width: 767px) {

    .sf-menu {

      display: none; } }

 

Then, around Line 38

 

.sf-menu > li {

  display:inline-block;    (Add This)   (it was float: left;)

  border-right: 1px solid #d6d4d4; 

  margin-bottom: -3px; }

  @media (max-width: 767px) {

    .sf-menu > li {

      float: none;

      position: relative;

      border-right: none; }

 

Result

http://screencast.com/t/jo1Av49bSBb2

 

 

Hope this makes sense

 

Paul

[ImperialTrader]

Thanks Mate <3

[Le Sultan]

 

Hello

 

You need to go to super-fish modified.css

and around Line 13 

 

.sf-menu {

  text-align:center;      (Add This)  (it was position:relative;)

  padding: 0;

  width: 100%;

  border-bottom: 3px solid #e9e9e9;

  background: #f6f6f6; }

  @media (max-width: 767px) {

    .sf-menu {

      display: none; } }

 

Then, around Line 38

 

.sf-menu > li {

  display:inline-block;    (Add This)   (it was float: left;)

  border-right: 1px solid #d6d4d4; 

  margin-bottom: -3px; }

  @media (max-width: 767px) {

    .sf-menu > li {

      float: none;

      position: relative;

      border-right: none; }

 

Result

http://screencast.com/t/jo1Av49bSBb2

 

 

Hope this makes sense

 

Paul

 

Good evening have you how to make on the version 1.6.06 ?.thank you

[PascalVG]

A simple way is to

 

edit file themes/<your theme folder>/css/modules/blocktopmenu/css/superfish-modified.css  (make backup!)

 

find the code for

.sf-menu {...} and add to it a line:

 

left:30%;   // you can increase or decrease, according to amount of menu items

 

and change the definition of 

  width :100%; 

to fit with the items width (so that all top items exactly fit in the menu)

  width: 437px;    // change size according to your menu items - width, so that it fits exactly

 

 

 

N.B. if this doesn't like nice for different, smaller sizes of the browser, you can make it change according to the browser size:

Then add to the end of the same file:

 

 

@media (min-width: 768px) and (max-width: 991px) {

   .sf-menu {

      left: XX%; // change XX to what looks good for browser widths between 768 and 991 pixels wide

      width: YYpx;

   }

}

 

and

 

@media (max-width: 767px) {

   .sf-menu {

      left: XX%;// change XX to what looks good for browser widths smaller than 768 pixels wide

      width: YYpx;

   }

}

 

 

Hope this helps,

pascal

[Le Sultan]

 

A simple way is to

 

edit file themes/<your theme folder>/css/modules/blocktopmenu/css/superfish-modified.css  (make backup!)

 

find the code for

.sf-menu {...} and add to it a line:

 

left:30%;   // you can increase or decrease, according to amount of menu items

 

and change the definition of 

  width :100%; 

to fit with the items width (so that all top items exactly fit in the menu)

  width: 437px;    // change size according to your menu items - width, so that it fits exactly

 

 

 

N.B. if this doesn't like nice for different, smaller sizes of the browser, you can make it change according to the browser size:

Then add to the end of the same file:

 

 

@media (min-width: 768px) and (max-width: 991px) {

   .sf-menu {

      left: XX%; // change XX to what looks good for browser widths between 768 and 991 pixels wide

      width: YYpx;

   }

}

 

and

 

@media (max-width: 767px) {

   .sf-menu {

      left: XX%;// change XX to what looks good for browser widths smaller than 768 pixels wide

      width: YYpx;

   }

}

 

 

Hope this helps,

pascal

 

Good evening. Can help me because I do not understand. My code thank you

 

.sf-menu {

  position:relative;

  padding: 0;

  width: 100%;

  border-bottom: 3px solid #666666;

  border-radius: 10px;

  background: #333333; }

  @media (max-width: 767px) {

    .sf-menu {

      display: none; } }

 

.sf-menu ul {

  position: absolute;

  top: -999em;

  background: #000000;

  margin-top: 10px;

  margin-bottom: 10px;

  border: 1px solid #666;

  border-radius: 10px; }

  @media (max-width: 767px) {

    .sf-menu ul {

      position: relative; } }

 

.sf-menu ul li {

  width: 100%; }

 

.sf-menu li:hover {

  visibility: inherit;

  /* fixes IE7 'sticky bug' */ }

 

.sf-menu > li {

  float: left;

  border-right: 1px solid #666666;

  margin-bottom: -3px; }

  @media (max-width: 767px) {

    .sf-menu > li {

      float: none;

      position: relative;

      border-right: none; }

      .sf-menu > li span {

        position: absolute;

        right: 6px;

        top: 20px;

        width: 30px;

        height: 30px;

        z-index: 2; }

        .sf-menu > li span:after {

          font-family: "FontAwesome";

          content: "\f067";

          font-size: 26px; }

        .sf-menu > li span.active:after {

          content: "\f068"; } }