Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #743840

    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

    #743886

    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

    #743941

    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

    #744034

    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

    #744780

    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

    #745092

    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

    #745356

    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

    #746558

    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, 4 months ago by Vinay.
    #746792

    Hi Vinary

    Hmm, i did it but without that effect….

    All the best,
    Pascal

    #749156

    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

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