Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • August 13, 2015 at 10:35 am #487052
    c3computers

    Hi

    http://hotelelburg.c3dev.nl/

    How can i get the header thicker?

    ive used this code from some time ago:

    nav.main_menu {
background: #ffffff;
border-radius: 20px;
}

    And how do i make is as width as the menu is, (not full width)

    thank u!

    August 13, 2015 at 11:16 am #487075
    Guenni007

    edit : sorry i misunderstood you

    soon an edit follows :lol

    • This reply was modified 9 years, 4 months ago by Guenni007.
    August 13, 2015 at 11:21 am #487080
    c3computers

    Hi Guenni!

    Your code works, but now the white background is full width… with the padding i can make is smaller but i dont think that its te right way? The white background needs to be as width as the menu items, so from Home till Contact. With al litte extra on both sides.

    jeah i mean the hight of the white background of the menu (the menu text needs to be in the center (from left to right and from top to bottom)

    Hope you understand what i mean.

    Tnx!

    August 13, 2015 at 11:28 am #487087
    Guenni007

    sorry – see my edit – try instead:
    and get rid of that 100% rule mentioned above before edit.

    nav.main_menu {
    background: transparent none repeat scroll 0 0 !important;
}

#header_main #avia-menu {
    background: #fff !important;
    border-radius: 20px;
    padding: 0 20px;
}

.av_alternate_logo_active #avia-menu {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

    this removes the container background – but when scrolled down the behaviour is as usual

    • This reply was modified 9 years, 4 months ago by Guenni007.
    August 13, 2015 at 11:45 am #487108
    c3computers

    Hi

    now the menu is only transparant?

    No white BG

    I works! Browser cache ;)

    • This reply was modified 9 years, 4 months ago by c3computers.
    August 13, 2015 at 11:46 am #487109
    Guenni007

    to get the list points near the center add:

    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
    height: 60px;
    line-height: 60px;
}
    August 13, 2015 at 11:48 am #487113
    Guenni007

    hm i wait until you are ready with your decision of the hight: a few minutes ago there was a hight of 88px now it is small.

    because all values depends on that decision

    August 13, 2015 at 11:56 am #487117
    c3computers
    
nav.main_menu {
    background: transparent none repeat scroll 0 0 !important;
}

#header_main #avia-menu {
    background: #fff !important;
    border-radius: 20px;
    padding: 0px 20px;
}

.av_alternate_logo_active #avia-menu {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

.html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
    height: 60px;
    line-height: 60px;
}

    When i remove the last code:

    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
    height: 60px;
    line-height: 60px;

    Every think is perfect in line. The only thing i wanne do is increase the thinkness (height) of the white bg.

    next: is it possible to bring down the whole menu. ( when i change it to

    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
    height: 80px;
    line-height: 80px;

    the menu text goes down (but not the white bg), i think that it a nice possision for this design.

    tnx!

    • This reply was modified 9 years, 4 months ago by c3computers.
    August 13, 2015 at 12:29 pm #487135
    Guenni007

    yes but to look nice it had to be the same hight of the height when you scroll down !

    August 13, 2015 at 12:32 pm #487138
    Guenni007

    these settings above were for your first choosen normal (88px) hight – for the small nav you need this instead

    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
    height: 35px;
    line-height: 35px;
}
    August 13, 2015 at 12:40 pm #487144
    c3computers

    Ohhh now i understand what you mean.. the total header height set in the enfold options :).

    The weird thing is that is is exacly the same (perfect in line) with or without this code:

    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
    height: 35px;
    line-height: 35px;
}

    Thanks for you help!

    August 13, 2015 at 12:41 pm #487146
    Guenni007

    ok try to get rid of all code above and set instead:
    the shifting of the menu comes later:

    nav.main_menu {
    background: transparent none repeat scroll 0 0 !important;
}

#header_main #avia-menu {
    background: #fff !important;
    border-radius: 20px;
    padding: 0 20px;
}

.av_alternate_logo_active #header_main #avia-menu {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

.html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
    height: 35px;
    line-height: 35px;
}

    and then we see next steps

    August 13, 2015 at 12:45 pm #487147
    c3computers

    Now its broken :)

    see: http://hotelelburg.c3dev.nl/

    old:

    .av_alternate_logo_active #avia-menu {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

    latest:

    .av_alternate_logo_active #header_main #avia-menu {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

    Thats the only differce betwean your codes

    • This reply was modified 9 years, 4 months ago by c3computers.
    August 13, 2015 at 1:28 pm #487173
    Guenni007

    yes this was made due to the background transparency of the header on scrolling – but if you use a full color than it is obsolete!
    on white case there was before a 0.8 opacity of header and a full white under ul – this looks awfull.
    but with your brown this is not important.

    just for you to learn :lol
    this 

    .av_alternate_logo_active #avia-menu {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

    does not overwrite the rule :

    #header_main #avia-menu {
    background: #fff !important
}

    but this does !

    .av_alternate_logo_active #header_main #avia-menu {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

    because it is more specific ( it is a special case of the other)
    ;)

    August 13, 2015 at 1:40 pm #487180
    c3computers

    maybe it above my grade :) hhaha

    nav.main_menu {
    background: transparent none repeat scroll 0 0 !important;
}

#header_main #avia-menu {
    background: #7c6853 !important;
    border-radius: 20px;
    padding: 0px 20px;
}

.av_alternate_logo_active #avia-menu {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

    Thats the code that ive insert now, and it looks fine :).

    Thank you very much for your time and informations!

    http://hotelelburg.c3dev.nl/#top

    August 13, 2015 at 3:58 pm #487265
    Rikard

    Hi,

    I didn’t know you guys were having a party here, did you get your problem fixed @c3computers? Thanks a lot for the help @Guenni007!

    Best regards,
    Rikard

    August 13, 2015 at 5:11 pm #487315
    c3computers

    Hi @Rikard!

    The problem is solved!

    August 14, 2015 at 8:12 am #487575
    Rikard

    Hi,

    Great, glad you got it fixed :-)

    Thanks again @Guenni007!

    Cheers!
    Rikard

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Enfold header’ is closed to new replies.