Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 15, 2015 at 10:16 am #428773
    LorbeerDesign

    Hello,

    I would like to customize the main menu .

    There have already made ​​adjustments. Now I would like that adapts to the main menu of the browser width. This means that the colored bar at zoom in / zoom scale of the browser. But the colored bars should always have the same width and height.

    Currently the colored bars are right aligned as in the attached picture .
    Image 1

    I also have a picture taken , such as the navigation should be.
    Image 2

    I hope you can help me and thank you ever :- )

    April 15, 2015 at 9:21 pm #429234
    Elliott

    Hey LorbeerDesign!

    You might be able to do it like so.

    nav.main_menu a {
  width: 6vw !important;
}

    Send us a link to your page and we’ll see what we can do.

    Best regards,
    Elliott

    • This reply was modified 9 years, 7 months ago by Elliott.
    April 16, 2015 at 7:56 am #429379
    LorbeerDesign

    Hi Elliott,

    Thanks for your answer. Here’s how you wanted , the link to the site at issue.

    I ‘m really looking forward to your reply.
    Best Regards

    April 17, 2015 at 4:31 am #430071
    Rikard

    Hey!

    Could you provide us with a link to the site in question so that we can take a closer look please? I can’t see a link your previous reply.

    Regards,
    Rikard

    April 17, 2015 at 7:47 am #430134
    LorbeerDesign

    Hi,

    the is the link to the site: Link

    Best Regards,
    Lorbeerdesign

    April 17, 2015 at 8:45 pm #430599
    Elliott

    Hi!

    Try this out instead.

    .av-main-nav { width: 100% !important; }
.av-main-nav > li { width: 20% !important; }
.avia-menu-text { display: block !important; width: 100% !important; }

    Best regards,
    Elliott

    April 20, 2015 at 8:19 am #431146
    LorbeerDesign

    Hi Elliott,

    Thanks for your answer. I have used the code. Unfortunately, it does not come out the desired result. Below is a screenshot of what causes the code.
    Perhaps you’ve still got a great idea :)

    Best Regards
    Lorbeer Design

    Image

    April 20, 2015 at 9:50 pm #431624
    Elliott

    Hey!

    I think that should be working. Send us a WordPress login and we’ll take a closer look.

    Regards,
    Elliott

    April 21, 2015 at 8:11 am #431796
    LorbeerDesign
    This reply has been marked as private.
    April 22, 2015 at 1:17 pm #432738
    Andy

    Hi!

    you did not implement Elliott’s code into your Quick CSS. Now I did it for you and add some more values to it so it fits your mockup:

    .av-main-nav { width: 100% !important; }
.av-main-nav > li { width: 20% !important; }
.avia-menu-text { display: block !important; width: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 25px; }

    Please adjust by yourself as needed. You find this code on the very top of your Quick CSS.

    There is one line of code in your Quick CSS:

    .main_menu > div {height: 40px !important;}

    which you would need to change to something like 

    .main_menu > div {height: 33px !important;}

    if you want the menu to get closer to main content.

    For further theme customization we kindly ask you to hire a freelancer.

    Best regards,
    Andy

    April 23, 2015 at 9:52 am #433321
    LorbeerDesign

    Hi Andi,
    that’s wonderful, it works perfectly. I am impressed of the great support!

    I am very grateful.
    Best Regards

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