Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 30, 2015 at 3:05 pm #544509
    silviouk

    Hi there,

    I’ve been asked to do a website for a new client who wishes to have a right/left menu with logo in the centre (not above).

    All current configurations within enfold do not allow for this. I’ve looked at the Full width Sub Menu, but this cannot be placed into any of the layout elements i.e. 2/5 (menu left) 1/5 (logo) 2/5 (menu right).

    I’ve tried to isolate the code for the Full width Sub Menu feature but I’ve not been able to, i.e. to place in a code block, configured as above.

    Can you help me here?

    Thanks, Silvio

    November 30, 2015 at 5:27 pm #544637
    Elliott

    Hey silviouk!

    You can do a logo center, menu below layout and then use CSS to split up the menu on either side. Send us a link to your page and we’ll take a look. You can set your reply as private if you wish.

    Best regards,
    Elliott

    November 30, 2015 at 7:23 pm #544751
    silviouk

    Hi Elliot, the link is below, thanks! This is a test domain/site to explore options before starting the full work, so if you can forward whatever the custom css is…Silvio

    • This reply was modified 9 years ago by silviouk.
    December 2, 2015 at 1:39 pm #545855
    silviouk

    Hi there,

    I’ve used this quick css, but unfortunatly it also affects the mobile menu alignment, is there a way to isolate the main menu to split left/right, but doesn’t affect the mobile menu?:

    strong.logo {
    top: 50px;
    }
    li#menu-item-47 {
    left: -200px;
    }
    li#menu-item-49 {
    left: -200px;
    }
    li#menu-item-53 {
    right: -300px;
    }
    li#menu-item-46 {
    right: -300px;
    }
    li#menu-item-45 {
    right: -300px;
    }

    December 2, 2015 at 8:53 pm #546100
    Elliott

    Hi!

    Yes, surround it all with this.

    @media screen and (max-width: 767px) {

}

    And it will only be applied on screens larger than 767px.

    Regards,
    Elliott

    December 2, 2015 at 9:53 pm #546128
    silviouk

    This option doesn’t stop the MOBILE menu becoming out of line, as was my query.

    • This reply was modified 9 years ago by silviouk.
    December 4, 2015 at 3:36 pm #547038
    Andy

    Hi!

    it does, if you do it correctly. As Elliott said surround your code with the media queries he provided to you. Something like this: 

    @media screen and (max-width: 767px) {
strong.logo {
top: 50px;
}
li#menu-item-47 {
left: -200px;
}
li#menu-item-49 {
left: -200px;
}
li#menu-item-53 {
right: -300px;
}
li#menu-item-46 {
right: -300px;
}
li#menu-item-45 {
right: -300px;
}
}

    This way your code will work for mobile screens only. Adjust as needed.

    Best regards,
    Andy

    December 4, 2015 at 5:00 pm #547099
    silviouk

    I forgot the final } !!! Thanks guys!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘SPLIT MAIN MENU’ is closed to new replies.