Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 10, 2016 at 8:41 pm #646335
    Raleigh

    I’m looking to create a layout similar to this site: http://www.conversion-rate-experts.com/
    I can get close to it by using the Logo and Main Menu in Sidebar setting under general layout.
    I realize a child theme will be require to achieve this but I need to know where to remove the main menu from the sidebar header and move it to above the page content on all pages.
    I thought I’d ask here to see if you guys could point me in the right direction of which theme files to modify in order to have the menu not appear in the header sidebar but instead above the page content.

    Thanks a ton – Raleigh

    June 10, 2016 at 9:09 pm #646349
    Vinay

    Hey Raleigh,

    You can achieve a similar layout by changing a few settings and with help of some custom CSS.

    1. Select “Left sidebar” from Enfold > General Layout > Logo and Main Menu

    2, To hide the menu in the sidebar Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .main_menu {
    display:none;
}

    3. Use a fullwidth menu element from the advanced layout builder on the front page.

    All tho one disadvantage is that you have to add a fullwidth submenu on all pages and post that you create. If it a site with only a few pages that you can manually change it is advisable to do this.

    Best regards,
    Vinay

    June 10, 2016 at 9:11 pm #646353
    Raleigh

    Hey thanks, that’s a great solution which I had thought of but does not work for my application as I need all blog post pages to display the same layout. Thanks again though!

    June 10, 2016 at 9:24 pm #646356
    Raleigh

    Vinay – I was able to find another workaround that works me.

    I’m still working on the details but will share the solution here once finalized.

    Thanks – Raleigh

    June 10, 2016 at 9:46 pm #646367
    Vinay

    Hi,

    That would be great! But to make the main menu appear on the top would take a lot of time and at the moment there is no easy way to do this by using a small custom code snippet, so I am afraid its out of the scope of our support.

    But please feel free to share your solution if you find a workaround for this :)

    Best regards,
    Vinay

    June 22, 2016 at 12:31 am #651801
    Raleigh

    So basically the way I did it was by instead of moving the navigation menu I’ve just modified the background of the site to fit my needs. So that the header logo appears to be in the sidebar but it’s actually in the header along with the nav menu.

    I’ve used the following rough CSS:

    .main_color{
background-color: transparent !important;
}
#main, .avia-msie-8 #header.av_header_sticky_disabled {
    background-color: transparent;
}
html.html_boxed {
 background-size: 35% 100% !important;
}
.container {
    padding: 0 0px !important;
}
.header_bg {
	background-color: transparent !important;
}
#header_main {
    border-bottom-width: 0px;
}
.sidebar_left .content {
    border-left-width: 0;
}
#top #main .sidebar_left .sidebar {
    border-right-width: 0px;
}
#top #main .sidebar {
text-align: left;
}
    June 22, 2016 at 4:42 pm #652238
    Yigit

    Hi!

    Glad you figured it out and thank you for sharing your solution!
    Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

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