Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17074

    Hello!

    Is there any neat way to make the main menu evenly spread over the page? I tried to add this fix, that works on other themes i tried, but I don’t get it to work for this theme. http://www.lenashore.com/2012/tutorials/wordpress/wordpress-css-how-to-create-an-automatically-evenly-spaced-menu/

    I also tried spread it thru set the padding on the li. But it only works for some browsers, cause the text grows and the last menu item pops down on an new line.

    Thanks in advance!

    /emil

    #94081

    Hi emil,

    Can you post a link to your site? don’t remove the code you have added yet, so we can check it further.

    Regards,

    Ismael

    #94082

    Hi again!

    We solved it temporary by adding padding to:

    .main_menu ul:first-child > li > a {

    padding: 0px 2.02em;

    }

    since we could’nt get the “lenashore-fix” to work.

    The “padding-fix” works until now when we need to put WPML on the website and add another language with a different menu.

    So I guess we need to work around it some how?

    Would be grateful if you ca give me any hints on how to do it.

    http://www.alesco.se/

    Thanks in advance!

    /emil

    #94083

    You can add a (language dependent) class to the header – eg replace:

    <div id='header' class=' header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerMenu; ?>'>

    with:

    <div id='header' class=' header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerMenu." ".ICL_LANGUAGE_CODE; ?>'>

    Afterwards you can use this class to add different paddings to your menus.

    #94084

    Hi

    I’m trying to do the same thing as emil where the menu spreads fullwidth across the entire width of the site.

    I don’t need the language fix – is there a better way than emils temp fix?

    emils site seems to be not responsive but mine needs to remain responsive.

    Many Thanks

    pixelist

    #94085

    Hey!

    You could use media queries: http://webdesignerwall.com/tutorials/css3-media-queries to make it responsive (eg set the padding to 0 for small devices).

    Best regards,

    Peter

    #94086

    Hi!

    The line of code in my header looks like this:

    <div class=’container_wrap header_color <?php avia_is_dark_bg(‘header_color’); ?>’>

    Do I only need to replace it with this:

    <div class=’container_wrap header_color <?php avia_is_dark_bg(‘header_color’);.” “.ICL_LANGUAGE_CODE;?>’>

    or do I make a duplicate for each languange? And how would the css look like if i need english and swedish as languages?

    I’m a bit lost and seems like I missing something.

    Would u be kind to give me a hint?

    Thanks in advance!

    /emil

    #94087

    Hi emil,

    I believe the code itself will change based on the language. So you can then target that class selector and change the menu that is within the produced class.

    So if you add that in, the header ID will have a class along with it to target.

    Regards,

    Devin

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Evenly spread/distribute menu’ is closed to new replies.