Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 2, 2018 at 2:22 am #935859
    hazelallturf

    Hi,

    I would like to split my menu – Menu & Search to the left. Account & Basket to the right. Logo to stay central.

    Can you please help with the CSS to achieve this?

    Many thanks

    Luke

    April 2, 2018 at 6:28 am #935905
    Victoria

    Hey hazelallturf,

    Could you please attach a mockup of what you’re trying to achieve?

    Here is an article form our docs, there are plenty if customizations there

    Menu

    If you need further assistance please let us know.
    Best regards,
    Victoria

    • This reply was modified 6 years, 7 months ago by Victoria.
    April 2, 2018 at 11:41 am #936008
    hazelallturf

    Hi,

    The logo centre, split menu is roughly what I need however if you see the following site:

    https://www.awwwards.com/

    The Menu and search icon are the left of the header, the logo is central and the account details are to the right of the header.

    Please advise.

    Many thanks

    April 2, 2018 at 6:51 pm #936157
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    .main_menu,.av-main-nav-wrap {
    width: 100%;
}
#top #menu-item-search, li#menu-item-439 {
    float: right;
}

    and you can then set your logo as header background image and choose center center position with no repeat :)

    Best regards,
    Yigit

    April 2, 2018 at 10:08 pm #936209
    hazelallturf

    Hi Yigit,
    Thanks for the help. Can you please review my website and advise how I can swap the search icon and the account icon? A

    Along with adding a spacing line after what will be the seach icon but is currently the account?

    Many thanks,

    Luke

    April 3, 2018 at 3:47 pm #936622
    Vinay

    Hi,

    To swap the icons please use the below CSS code.

    You can change the order number to the icons to move their position. Please feel free to remove the background color property it is used only to show visual reference.

    #avia-menu {
	display:flex;
}

#avia-menu li:nth-child(1) {
background:red;
}

#avia-menu li:nth-child(2) {
order: 4;	
background:lightgreen;
margin-left:auto;
}

#avia-menu li:nth-child(3) {
	order: 4;
	background:gold;
}

#avia-menu li:nth-child(4) {
	background:cyan;
}

    Best regards,
    Vinay

    April 3, 2018 at 4:10 pm #936632
    hazelallturf

    Hi Vinay,

    Brilliant, thanks for the help. Can I ask how to add a line on the right of the basket to make it match the left hand side?

    Many thanks agan

    April 4, 2018 at 5:38 am #936919
    Rikard

    Hi,

    Please try this CSS as well:

    #menu-item-439 {
    border-right: 1px solid #eee;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.