Tagged: , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • November 28, 2013 at 7:15 pm #194467
    sgrobert

    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

    November 28, 2013 at 11:58 pm #194542
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    November 29, 2013 at 3:13 am #194579
    sgrobert
    This reply has been marked as private.
    November 29, 2013 at 4:16 am #194590
    Josue

    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

    November 29, 2013 at 4:58 am #194602
    sgrobert

    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

    November 29, 2013 at 5:24 am #194604
    Josue

    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

    November 29, 2013 at 5:30 am #194606
    sgrobert
    This reply has been marked as private.
    November 29, 2013 at 5:47 am #194607
    Josue

    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

    November 29, 2013 at 5:57 am #194608
    sgrobert

    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

    November 29, 2013 at 6:10 am #194610
    Josue

    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

    November 29, 2013 at 6:17 am #194611
    sgrobert

    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

    November 29, 2013 at 9:36 am #194629
    sgrobert

    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

    December 2, 2013 at 5:46 am #195187
    sgrobert
    This reply has been marked as private.
    December 2, 2013 at 6:09 am #195195
    sgrobert

    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

    December 2, 2013 at 8:16 pm #195455
    Devin

    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 :)

  • Author
    Posts
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.