Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 8, 2014 at 10:25 am #276169
    musklick

    Hi, I would like to set the menu width the same as the content, is there a quick fix CSS for that? The content is 910 px.

    Thanks
    /Michael

    June 8, 2014 at 1:07 pm #276178
    Ismael

    Hey musklick!

    Thank you for using the theme!

    What is the position of your menu? It’s not a good idea to define a specific width because it might break the responsiveness of the menu section. If you can provide us with a screenshot of what you’re trying to achieve with the menu, that will help a lot.

    Best regards,
    Ismael

    June 8, 2014 at 3:41 pm #276223
    musklick
    This reply has been marked as private.
    June 8, 2014 at 3:50 pm #276226
    Ismael

    Hey!

    Thank you for the update.

    Instead of specifying the width of the menu, you can increase the left and right padding of the menu items. Use this on Quick CSS or custom.css:

    .av-main-nav > li > a {
padding: 0 29px;
}

.av-main-nav > li:last-child > a {
padding: 0;
}

    Regards,
    Ismael

    June 8, 2014 at 6:51 pm #276260
    musklick

    Thanks Ismael, but I didn’t get that to work. Is the class right? I see it called “<div id=”header_main_alternate” class=”container_wrap” ?

    Hope you have a clue, ’cause I don’t ;-)

    Thanks
    /Michael

    June 8, 2014 at 9:40 pm #276276
    musklick

    Hello again, I see now that the CSS did work, it made the menu width smaller, but the background of the menu still spans the whole Main Div. What I want is for the menu including the background to have the same width as the content area.

    Thanks
    /Michael

    June 9, 2014 at 1:51 am #276314
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    div#header_main_alternate .container {
width: 100%;
margin: 0;
}
.av-main-nav > li > a { padding: 0 25px; }
.html_main_nav_header #top .main_menu .menu>li:last-child>a, .html_bottom_nav_header #top #menu-item-search>a {
padding-right: 25px;
}

    After adding the code, your menu should look like this – http://i.imgur.com/LgiQx3X.png

    Cheers!
    Yigit

    June 17, 2014 at 12:52 am #279773
    musklick

    Hi Yigit and Ismael, thanks for your replies but I can’t get it to work. The padding seems to increase the space between the menu items so the menu doesn’t fit on one line anymore, and the menu still spans the whole Main Div, and what I want is for it to have the same width as the Container Div.

    Could you please have another look? Thanks
    /Michael

    June 17, 2014 at 12:53 am #279774
    musklick

    Oh, and one more thing: the Mega Menu under Site map is cropped, I can only see a portion of it, can you help with that too, please?

    Thanks again
    /Michael

    June 17, 2014 at 5:26 am #279831
    Ismael

    Hey!

    Thank you for using the theme.

    I’m sorry but what you’re trying to do with the menu width is not possible without modifying the theme files. You need to create a script that dynamically calculate the width of the menu container and apply the correct padding on the menu items in response to the calculated width. That task is beyond the scope of support however you can use the suggested code above to increase the left and right padding of the menu items then use media queries to adjust it smaller screens.

    Regarding the mega menu, did you add any css modifications for it? Please download the latest version from your themeforest account then update the theme via FTP. Please refer to this link for more info: http://kriesi.at/documentation/enfold/updating-your-theme-files/

    Best regards,
    Ismael

    June 28, 2014 at 1:08 am #284761
    musklick

    Thanks for your reply Ismael. If I can’t make the menu the same width as the container div, I’ve tried putting a background that has color the same width as the container div and the rest of the wrap div is white, and if it’s a smaller screen the dark color fills the wrap div, which is OK. So at least at bigger screens the desired effect is achieved. Now I just have a small dark line that I need to get rid of, if I make changes in the settings it affects areas that I don’t want to change. Can I use some specific CSS that only targets the thin line? (which is actually the header background color)

    As for the Mega menu it was solved by ticking “This column should start a new row”

    Thanks,
    Michael

    June 29, 2014 at 3:44 am #284925
    Ismael

    Hi!

    Thank you for the update.

    Please try this:

    #header_main {
border-bottom: 0;
}

    Cheers!
    Ismael

    June 29, 2014 at 8:48 am #284993
    musklick

    Thanks Ismael, that worked :-)

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Width of menu’ is closed to new replies.