Justified main menu items - V.6.0.4

Home Forums Older releases 0.9.x Justified main menu items - V.6.0.4

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1277
    tonyp
    Participant

    Using v.6.0.4 fine but would like to ‘justify’ the main menu items. By this I mean to spread them out so the left one is at the left hand of the menu line, the right one (the last one) is at the right hand end of the menu line.

    I’m sure I’m missing something very simple but really cannot see what.

    #1472
    admin
    Keymaster

    Hi,

    You can use the following – it will work in all browsers except IE7:

    #Menu1 {
    	display:table;
    }
    #Menu1 > li {
    	display:table-cell;
    	float:none;
    	width:1%;
    }
    #Menu1 > li > a {
    	padding-right:0 !important;
    	text-align:center;
    }

    If you care about IE7, you can also add the following and it will fix the main menu for it so that it doesn’t look too bad:

    /* IE7 main menu fix */
    *:first-child+html #Menu1 > li {
    	float:left;
    	width:auto;
    }
    *:first-child+html #Menu1 > li > a {
    	padding-right:15px !important;
    }

    Cheers!

    #1473
    tonyp
    Participant

    Thanks for that. I added those lines to my main CSS file, was that correct?

    However they appear to make no difference. I’ve undoubtedly done something wrong, but cannot see what.

    Edit: The problem seems to be that I cannot get the leftmost menu bar Menu item to move to the left of the menu bar area. By use of non-blank spaces etc. and can get the rest spaced out towards the right – though IE & FF do things differently!

    Any thoughts would be most welcome.

    #1474
    admin
    Keymaster

    Hm, are you sure you are using SmartMenus 6 (and not the new jQuery version)? Because these rules work just fine on the default v6.0.4 demo page. Or maybe, you are using a different id for your menu tree and not “Menu1”?

    In any case, it’s very difficult to guess what exactly might be causing the issue without looking at your core. So if you like, please post some live URL and I will take a look (you can post it as “Protected data” if you’d like to keep it private between us.)

    Thanks!

    #1475
    tonyp
    Participant

    Thank you. The web site in question is http://www.allhallows-church.org.uk .

    #1476
    admin
    Keymaster

    Thanks, that helped a lot!

    OK, in your case some of the declarations did not take effect so please just use this code instead in your “common_style.css”:

    #Menu1 {
    	display:table;
    	border-spacing:0; /* removes completely the item spacing */
    }
    #Menu1 > li {
    	display:table-cell;
    	float:none !important;
    	width:1% !important;
    }
    #Menu1 > li > a {
    	padding-right:0 !important;
    	text-align:center;
    }

    Additionally in “c_config.js” set these to 0 in your main menu style array to remove the item separators spacing:

    0,		// ItemsSeparatorSize
    ...
    0,		// ItemsSeparatorSpacing

    Please let me know if you still have any troubles.

    Cheers!

    #1477
    tonyp
    Participant

    Brilliant! That worked. Indeed, as I wanted separate ‘blocks’ for each of the menu items, the changes to c_config.js weren’t needed.

    It’s now working as we wanted. Once again many thanks. 🙂

    #1478
    admin
    Keymaster

    Np, cheers! 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?