Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • December 8, 2013 at 10:43 pm #197800
    gshiels

    Hi
    I searched the forum but cannot find the answer to this.
    I would like the main menu in the header to be lower, ideally in line with the bottom of the logo. I added some custom CSS, but it wrecked the navigation :)

    I’d appreciate your help.

    Thanks

    Gary

    December 8, 2013 at 10:55 pm #197803
    Yigit

    Hey gshiels!

    Can you post the link to your website so we can check what type of header you are using?

    Cheers!
    Yigit

    December 8, 2013 at 11:47 pm #197824
    gshiels
    This reply has been marked as private.
    December 9, 2013 at 3:09 am #197864
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .header-scrolled .main_menu .menu{
    top: 7px  !important;
}
#top .main_menu .menu{
    position: relative;
    top: 65px;
}
#top .main_menu .menu > li > a{
    height: 50px  !important;
    line-height: 50px  !important;
}

    Cheers! 
    Josue

    December 9, 2013 at 1:57 pm #198021
    gshiels

    Hi Josue
    I added the CSS, but it’s not working. Please take a look.

    Cheers

    Gary

    December 9, 2013 at 5:34 pm #198091
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .main_menu { margin-top: -30px; }
.header-scrolled .main_menu { margin-top: 0; }

    Best regards,
    Yigit

    December 9, 2013 at 6:05 pm #198122
    gshiels

    Hi Yigit
    Still not working.
    The avia-menu-fx is below the line and the text crosses the line when you scroll (and the header shrinks).

    Sorry – I have tried to do this myself, but nothing worked consistently!

    Cheers

    Gary

    December 9, 2013 at 6:32 pm #198139
    Yigit

    Hey!

    Please flush browser cache after you apply custom CSS codes. It does work fine on my end. Only avia menu fx should be repositioned and you can do it by adding following code to Quick CSS

    .avia-menu-fx { bottom: 34px; }
.header-scrollred .avia-menu-fx { bottom: -1px; }

    Best regards,
    Yigit

    December 9, 2013 at 7:00 pm #198149
    gshiels

    Hi Yigit
    I’ve removed all of my custom CSS and just used yours (to avoid any possible conflict), but it’s still not working.
    I flushed the cache twice.

    Thanks

    Gary

    December 9, 2013 at 7:13 pm #198157
    Yigit

    Hey!

    Please see screencast i prepared for you. This is how it looks on my end http://www.screenr.com/jdwH
    As you can see only avia menu fx should be repositioned when scrolled down, and that is because there is typo in my previous code, sorry, please try following

    .header-scrolled .avia-menu-fx { bottom: 5px!important; }

    Regards,
    Yigit

    December 9, 2013 at 7:26 pm #198161
    gshiels

    Getting close Yigit – thanks!

    When you scroll down, and reach a point in between the full header and the small header, the text overlaps the image and the avia menu fx.

    Is there a way to offset the menu text so that it is always (say) 15px above the avia menu fx?

    Thanks

    Gary

    December 9, 2013 at 7:54 pm #198176
    Yigit

    Hi!

    Can you post a screenshot? Now it looks totally fine on my end http://www.screenr.com/jxwH

    Cheers!
    Yigit

    December 9, 2013 at 9:55 pm #198213
    gshiels

    It’s just the in between stage (between full header and smaller header)
    Can you see how the text is in the wrong place?

    http://tinypic.com/r/t9wfww/5

    December 10, 2013 at 12:21 am #198293
    Yigit

    Hey!

    If you would like menu to be lower in header and keep header resizing when scrolled, it has to happen like that on transition.

    Regards,
    Yigit

    December 10, 2013 at 12:25 am #198297
    gshiels

    Cheers Yigit – I understand now.

    One more thing please. Lower on the homepage is a “Request Call Back” section. How can I centre the SEND button? I’ve tried all sorts, but nothing works properly (e.g. margin: 0 auto; text-align: center; . . . )

    Thanks for your help.
    Gary

    December 10, 2013 at 12:29 am #198303
    Yigit

    Hey!

    Please add following code to Quick CSS as well. 

    .ajax_form p { text-align: center; }
p #element_avia_name_1, p #element_avia_telephone_1 { text-align: left; }

    That should do it

    Best regards,
    Yigit

    December 10, 2013 at 12:36 am #198304
    gshiels

    I removed the 2 p tags from the second line and it all works perfectly for my requirements.
    Thanks for all your help.
    First class!

    Gary

    December 10, 2013 at 12:38 am #198305
    Yigit

    Hey!

    You are welcome Gary! Glad we could help :) Let us know if you have any other questions or issues

    Best regards,
    Yigit

    June 5, 2014 at 1:36 am #274883
    kbarranco

    I don’t get it. I think I am having the same problem
    http://www.hatchnola.com/home/

    June 5, 2014 at 1:06 pm #275090
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .av-main-nav > li > a { line-height: 240px !important; }

    Best regards,
    Yigit

    June 5, 2014 at 4:54 pm #275204
    kbarranco

    thanks so much!!

    June 5, 2014 at 5:14 pm #275216
    Yigit

    Hi!

    You are welcome, we are always glad to help :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Move menu in header down lower’ is closed to new replies.