Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 7, 2017 at 12:09 pm #743840
    Amigs

    Hi
    We set the content with to max. 1600px and now we would like to spread the menue 100% over the content.

    So i try it with CSS like:

    .html_header_top.html_logo_center .main_menu ul:first-child {
    display: inline-block;
    width: 100%;
    }

    But it goes 100% over the whole browser and the menu are left-aligned.

    All the best

    February 7, 2017 at 1:21 pm #743886
    Vinay

    Hey Pascal,

    We have added the below code to Quick CSS section to make the menu 100% wide. Please review the site now :)

    #header #header_main_alternate .container{
    width: 100vw!important;
padding:0!important;
margin:0!important;
}
#avia-menu {
  text-align: center!important;
  display:flex!important;  
}

.av-main-nav > li {       
    flex-grow: 1;
    justify-content: center;
    width: auto!important;
}

.av-main-nav > li > a {
    display: block; 
}

    Best regards,
    Vinay

    February 7, 2017 at 3:30 pm #743941
    Amigs

    Hello Vinay

    Thanky you for your answer, but as i wrote i would like to spread only over the content part (in the theme setting i set it to max. 1600px and 90%) not over the whole width ot the browser.

    All the best,
    Pascl

    February 7, 2017 at 7:19 pm #744034
    Vinay

    Hi!

    In that case please remove this block of code the width of the menu will be same as the content.

    #header #header_main_alternate .container{
    width: 100vw!important;
padding:0!important;
margin:0!important;
}

    Best regards,
    Vinay

    February 9, 2017 at 12:42 pm #744780
    Amigs

    Hi Vinary

    Hmm, it looks for me as the same as before without any changes. The whole menu including the search loop shoud spread over the whole content area as the content below.

    All the best,
    Pascal

    February 9, 2017 at 9:56 pm #745092
    Vinay

    Hi,

    Some code was missing from the Quick CSS section. We have added the below code and the menu looks as per your request. If you like to modify the width please update the max-width value :)

    #header #header_main_alternate .container{
    width: 100%!important;
max-width:1220px;
padding:0!important;
margin:0!important;
left:50%;
transform:translateX(-50%);
}
#avia-menu {
  text-align: center!important;
  display:flex!important;  
}

.av-main-nav > li {       
    flex-grow: 1;
    justify-content: center;
    width: auto!important;
}

.av-main-nav > li > a {
    display: block; 
}

    Best regards,
    Vinay

    February 10, 2017 at 12:27 pm #745356
    Amigs

    Hello Vinay

    Thank you, now it looks 80% so we would like.

    1. how can we remove or set up the active line (https://www.dropbox.com/s/za7c155p0j52apl/Screenshot%202017-02-10%2011.23.55.png?dl=0)
    2. you see the picutres has a small edge and we would have that exactly in the flurry with the picture edge.

    All the best,
    Pascal

    February 13, 2017 at 6:35 pm #746558
    Vinay

    Hey!

    1. To remove the active menu indicator please go to Enfold > Header > Header Layout > Header Style and choose minimal.

    2. Not sure what you trying to achieve. I’m assuming you like to make the menu same width as the picture? in that case please adjust the max-width value in the code provided earlier.

    #header #header_main_alternate .container{
    width: 100%!important;
max-width:1220px;
...
...

    Cheers!
    Vinay

    • This reply was modified 7 years, 9 months ago by Vinay.
    February 14, 2017 at 10:37 am #746792
    Amigs

    Hi Vinary

    Hmm, i did it but without that effect….

    All the best,
    Pascal

    February 20, 2017 at 6:56 am #749156
    Vinay

    Hi,

    I’m not sure if I understood you correct, please feel free to elaborate the issue if you need more help.
    We will be happy to assist you.

    Best regards,
    Vinay

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