Jump to content

Top Horizontal Menu - How To Center Align?


Recommended Posts

Hi, I’m sure I’m asking something simple but I’m not sure how to make the Top Horizontal Menu bar centered - I'm using Prestashop version 1.6.1.1 

 

I’ve managed to get my menu categories centre aligned within the bar, but there’s an un-needed and useless gap either end of the bar when it’s at 100% (screenshot 1 with red ovals attached post-300970-0-59253200-1457635001_thumb.jpg). If I change it to 90% in the themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

  clear: both;

  float: left;

  width: 90%; }

 

I get rid of the useless ends but my menu block is left aligned (screenshot 2 attached post-300970-0-55454600-1457635200_thumb.jpg) – I know changing float to center won’t work, but hopefully someone can tell me how to center align the element when it’s at 90%. Thanks in advance!

All the best!

Kat

Edited by Skazz (see edit history)

Share this post


Link to post
Share on other sites

Oh, I'm so sorry! My website link is www.bedlamitesboutique.co.uk but is currently in maintenance mode while I'm building - if you need me to take it off of that mode to view the code, just say the word! I am using a copy of the default theme supplied with Prestashop 1.6.1.1   :)

 

I did try an alternate way of making the categories look nice, leaving the width at 100% and stretching the categories out across that width as detailed in this post: https://www.prestashop.com/forums/topic/499538-1610-horizontal-menu-default-theme-stretch-elements-to-use-full-width/ by editing the global.css for the theme, however it didn't work on this version, so I removed the code from global.css and changed the width of the top menu back to 90%...somehow, I now have a 90% width with the annoying blank end bits I began with (Screenshot 3 attached post-300970-0-30990000-1457993657_thumb.jpg) and if I change the width to 80% it moves onto 3 lines and I still have strange ends! Since I changed everything back, I'm not sure what's happening there, so I hope someone can enlighten me :D

 

Thanks in advance, look forward to hearing from you!

All the best!

Kat x

Edited by Skazz (see edit history)

Share this post


Link to post
Share on other sites

Okay, the website is back to the 90% size being left aligned but with the end bits gone, as in the first post - I have cache off and force compile on, so I'm not sure why it's taking a while for changed code to manifest, but never mind. Anyone who can help with the original issue (moving the horizontal menu bar into the center of the page) on the default theme of 1.6.1.1, any help is gratefully appreciated! Thanks in advance!

Kat

Share this post


Link to post
Share on other sites

  • 3 weeks later...
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More