Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #194467

    Hi there,

    I would like to know if there is a way to place the logo on top of the menu links and centralised both items? Also, if possible to enable the same effect, either by moving from top-center to default-logo-size-and-placement-location when scrolling or remain centralised but minimised-size when scrolling for both header items?

    Regards,
    Robert Chai

    #194542

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    #194579
    This reply has been marked as private.
    #194590

    Hey!

    Add this code to the Quick CSS:

    #header{
        background: white !important
    }
    #header_main .container {
        height: 160px !important;
    }
    .main_menu {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        top: 73px;
    }
    .main_menu ul{
        display: inline-block;
    }
    .logo.bg-logo {
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .header-scrolled #header_main .container {
        height: 85px !important;
    }
    .header-scrolled .main_menu{
        top: 41px !important;
    }
    .header-scrolled .logo.bg-logo{
        width: 72px !important
    }
    

    Cheers!
    Josue

    #194602

    Hey Josue,

    Thanks for the code. Sadly, it only works halfway? The logo is still aligned to the left though, any way it can be aligned center as well? Thanks!

    Regards,
    Robert Chai

    #194604

    Hey!

    Apply the code to your website so i can try to debug it.

    #header{
        background: white !important
    }
    #header_main .container {
        height: 160px !important;
    }
    .main_menu {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        top: 73px;
    }
    .main_menu ul{
        display: inline-block;
    }
    .logo.bg-logo {
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
    }
    .header-scrolled #header_main .container {
        height: 85px !important;
    }
    .header-scrolled .main_menu{
        top: 41px !important;
    }
    .header-scrolled .logo.bg-logo{
        width: 72px !important
    }

    Regards,
    Josue

    #194606
    This reply has been marked as private.
    #194607

    Hey!

    Try with this instead:

    #header{
        background: white !important
    }
    #header_main .container {
        height: 242px !important;
    }
    .main_menu {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        top: 155px;
    }
    .main_menu ul{
        display: inline-block;
    }
    .main_menu ul a{
      height: 88px !important;
      line-height: 88px !important;
    }
    .logo {
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
    }
    .header-scrolled #header_main .container {
        height: 120px !important;
    }
    .header-scrolled .main_menu{
        top: 75px !important;
    }
    .header-scrolled .logo{
        width: 72px !important
    }
    .header-scrolled .main_menu ul a{
      height: 44px !important;
      line-height: 44px !important;
    }

    Cheers!
    Josue

    #194608

    Hi Josue,

    Hmm.. The logo seem to be jumping around the top left.. Not really full-center. Added the code. But not really working correctly.

    Regards,
    Robert Chai

    #194610

    Hey!

    Try replacing the logo part with this:

    .logo {
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        width: 156px !important;
        height: 156px !important;
    }
    .logo img {
        width: 100% !important;
    }

    Regards,
    Josue

    #194611

    Hi Josue,

    It does seem to work, though I’m not sure whether the “Logo”-squash effect is suppose to look like that when then height’s resizing can be seen. Given that, the slider’s background doesn’t seem to appear correctly now from the base of the menu and below.

    Also, could you direct me at the ‘classes’ to edit for the menu links for a, a:hover , as the layout seem to be slightly offset in height for the menu links. Appreciate it!

    With regards,
    Robert Chai

    #194629

    Hi Josue,

    Also, on a sidenote, when scrolling up to the top, the logo becomes super small and not it is its original logo size.

    Regards,
    Robert Chai

    #195187
    This reply has been marked as private.
    #195195

    Hi there,

    I’ve got it. The problem is due to insufficient Page Links created. It will automatically become just much smaller if 3 or lesser links were created. Insert more links should solve the problem. ;)

    Regards,
    Robert Chai

    #195455

    Glad you were able to get it sorted out!

    Generally this kind of customization is far beyond what we can do via support since it can lead to cross browser fixes as well as additional responsive fixes needed but Josue went beyond the norm for you :)

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Creating a Centralised Header with Logo on Top of Menu Links’ is closed to new replies.