Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • August 30, 2018 at 5:39 pm #1003731
    Exec4

    My client wants to create a landing page for each of their products that still has the main nav (no problem with that) and then below it (on certain pages) create a full screen image with elements on it, including another navigation for the page.

    Is there a way to accomplish this in a color section? “Full width submenu” would be perfect if I can figure out how to have it float transparently over the color section.

    They want all this over an image:
    Logo | 2 line Nav item | 2 line Nav item | 2 line Nav item | 2 line Nav item | 2 line Nav item

    H2 Copy and then video gallery to the right.

    I have it all worked out in a “Color Section” but can’t figure out how to add the nav. Is there a way?

    Thanks

    August 31, 2018 at 12:30 pm #1004061
    Ismael

    Hey Exec4,

    Thank you for using Enfold.

    Have you tried to use the Widget Area element? Add a navigation menu widget on a custom widget area and then use the widget area element to render the navigation widget in the page. I’m not exactly sure how you want it to look like but I think you can start with that.

    Best regards,
    Ismael

    August 31, 2018 at 3:49 pm #1004130
    Exec4
    This reply has been marked as private.
    August 31, 2018 at 7:32 pm #1004201
    Exec4
    This reply has been marked as private.
    September 1, 2018 at 5:59 am #1004271
    Vinay

    Hi,

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

    CSS Snippet:

    
/* CSS - widget menu */

#menu-wats3d-top {
    display: flex;        
    justify-content: space-between
}

#menu-wats3d-top li {
  border: none !important;
}

    Result: https://i.imgur.com/6TXp6M0.jpg

    Best regards,
    Vinay

    September 4, 2018 at 4:15 pm #1005670
    Exec4

    Perfect. What if I want to close up the space between menu items? Or slide the whole navigation to the left?

    September 4, 2018 at 5:15 pm #1005694
    Vinay

    Hi,

    You can control the gaps by adding a max-width to the container.

    #menu-wats3d-top {
max-width: 700px;
}

    But sorry to say that you can only slide it a few more pixels to the left as seen in the below screenshot the image takes up one third. If you still want to try you can add the float:left!important rule.

    Best regards,
    Vinay

    September 4, 2018 at 5:34 pm #1005702
    Exec4

    Thanks. How about if I wanted to slide the navigation bar closer to the logo?

    September 4, 2018 at 8:43 pm #1005762
    Exec4
    This reply has been marked as private.
    September 5, 2018 at 4:48 am #1005861
    Vinay

    Hi,

    As you can see in the screenshot the menu is already to the left of the column. You can try changing the structure in the backend and put both the logo and menu in the same column and use the CSS to float them both to the left.

    To affect only the widget menu please replace the below code

    #top .widget_nav_menu li a{
display: inline-block !important;
padding: 5px;
float: left !important;
font-size:14px;
color: #fff !important;
text-transform:uppercase !important;
line-height: 1.2;
}

    With

    #top #menu-wats3d-top li a{
display: inline-block !important;
padding: 5px;
float: left !important;
font-size:14px;
color: #fff !important;
text-transform:uppercase !important;
line-height: 1.2;
}

    This should affect only the widget menu now.

    Best regards,
    Vinay

    September 5, 2018 at 4:51 pm #1006208
    Exec4

    Thanks that worked. Now, if I want to position the whole top menu – how can I control that?

    September 6, 2018 at 3:56 am #1006402
    Vinay

    Hi,

    Please clarify by the top menu are you referring to the main menu and where you want to position it?

    Upload a screenshot/mockup to one of the below sites and share the link here so we can help you better :)

    https://snag.gy/
    https://ctrlv.cz/en/
    https://imgur.com

    Best regards,
    Vinay

    September 6, 2018 at 4:16 pm #1006698
    Exec4
    This reply has been marked as private.
    September 7, 2018 at 5:40 am #1006891
    Vinay

    Hi,

    We discussed this earlier.

    As you can see in the screenshot the menu is already to the left of the column. You can try changing the structure in the backend and put both the logo and menu in the same column and use the CSS to float them both to the left.

    Did you try adding both the elements (WATS logo and menu) in the same column?

    1. Enable custom CSS class name support from Enfold > Layout Builder
    2. Assign a custom class name to logo and menu.

    Then we can use the custom class to position the logo and menu. The key here is they should be in same container.

    Best regards,
    Vinay

    September 12, 2018 at 10:40 pm #1009099
    Exec4

    How can I align the menu so that the right edge of the menu (“Get Started”) lines up with the navigation (“For Patients”) above it?

    Also, I notice that when the screen shrinks the nav gets squeezed together. Is there a way to make it into a vertical on mobile devices? Or, what are my options for mobile?

    September 13, 2018 at 5:27 am #1009208
    Vinay

    Hi,

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

    #top .widget_nav_menu ul {
    float: right;
}
#menu-wats3d-top {
    flex-wrap: wrap;
}
#top .content .flex_column .widget_nav_menu li {
    min-width: 100px;
}

    Best regards,
    Vinay

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