New Landing › How can we help? › Atelier › Customizing Mega Menu

Viewing 13 posts - 1 through 13 (of 13 total)
  • Back to forum
    Posted in: Atelier
  • June 9, 2016 at 11:25 pm #273636
    kplusd
    Member
    Post count: 20

    I’ve searched everywhere including the menu documentation page (http://swiftideas.com/documentation/2014/05/10/menus) and i’ve been unable to find details on how to incorporate spb code into mega menu successfully. It appears I have a few issues, 1.) need to change text color to white to match the sites theme, 2.)images are not appearing and need to remove post date banner, 3.) hide top left navigation label (“.”) and 4.) format the post titles to single line each if possible.

    Here’s the menu style i’m trying to replicate. I want to display large thumbnails of the 2 most recent posts (any category) and then list just the post titles of two specific categories on the right.

    In my menu you can see that the images and text are hidden.

    I’ve also attached the page i’ve created with spb to illustrate what it should look like.

    Here’s the custom HTML i’m using:
    [spb_column width=”2/3″ el_position=”first”] [spb_recent_posts display_type=”standard” carousel=”no” item_columns=”2″ item_count=”2″ category=”All” offset=”0″ posts_order=”DESC” excerpt_length=”0″ fullwidth=”no” gutters=”yes” button_enabled=”no” pagination=”yes” width=”1/1″ el_position=”first last”] [/spb_column] [spb_column width=”1/6″] [spb_widget_area element_name=”STORIES” sidebar_id=”thejournalmegamenu” width=”3/4″ el_position=”first last”] [/spb_column] [spb_column width=”1/6″ el_position=”last”] [spb_widget_area sidebar_id=”thejournalmegamenu2″ width=”3/4″ el_position=”first last”] [/spb_column]

    Please Help!!!! 🙂

    Attachments:
    You must be logged in to view attached files.
    June 12, 2016 at 3:12 pm #274056
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    Couldn’t login with the provided credentials? Can you check it so I can have a look at the menu.
    Thanks

    -Rui

    June 14, 2016 at 2:51 am #274424
    kplusd
    Member
    Post count: 20
    This reply has been marked as private.
    June 15, 2016 at 2:48 pm #274950
    kplusd
    Member
    Post count: 20

    As I’ve continued to work on this I have made some progress tinkering with the CSS. However there are still a few items that I need assistance on:

    – Removing navigation menu label (“.”)
    – Reducing image size and removing post date
    – Increasing the width of the two link columns on the right. I’d like each link to fit on one line each without the line between each
    – There is a category title above each link column that is hidden

    Have you been able to access the site?

    Attachments:
    You must be logged in to view attached files.
    June 17, 2016 at 10:25 am #275425
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    1) Removing navigation menu label (“.”) – please test this:

    nav .menu ul.sub-menu li > span {
    display: none;
}

    2) Reducing image size and removing post date – please use this:

    .mega-menu-widget figure.animated-overlay {
    max-width: 200px;
    margin: 0 auto 15px auto;
}
.mega-menu-widget .date-overlay.narrow-date-block {
    display: none;
}

    3) You want to increase the column width of these?

    4) There is a category title above each link column that is hidden – what did you want to do with this?

    Thanks.

    June 17, 2016 at 3:13 pm #275543
    kplusd
    Member
    Post count: 20

    Thank you David – the code you provided worked.

    – Is it possible to left align the thumbnails and text links below them and get rid of the extra padding around the thumbnails?
    – As you can see from the example below, I’d like links on the right to only take up 1 line. Right now they are taking up 3-4 lines each.
    – Re: The hidden category – I was able to change the font color to display them…but I like the categories (“Stories” and “Style Guide”) to be centered above the list of links.

    Again, thank you so much for your assistance with this menu.

    Attachments:
    You must be logged in to view attached files.
    June 20, 2016 at 12:38 pm #275880
    David Martin – Support
    Moderator
    Post count: 20834

    1) They are left aligned with the link below?

    You can remove the margin, using this:

    .mega-menu-widget figure.animated-overlay {
    margin: 0 auto;
}
.mega-menu-widget .recent-posts h5 {
    text-align: left;
}

    2) I don’t see how this is possible unless you increase the column width they reside in.

    @media (min-width: 768px) {
.spb-column-container.col-sm-2 .spb_widget_area.col-sm-9 {
    width: 100%;
}
}

    3) You have these centered already? Not sure I follow you here.

    Thanks.

    June 27, 2016 at 6:40 pm #277519
    kplusd
    Member
    Post count: 20

    Thanks David – a few tweaks and everything worked!

    June 27, 2016 at 6:45 pm #277523
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Glad it’s sorted. Thanks David.

    -Rui

    August 9, 2016 at 2:43 pm #286633
    kplusd
    Member
    Post count: 20
    This reply has been marked as private.
    August 9, 2016 at 3:10 pm #286636
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Add this to your custom CSS:

    .masonry-items .blog-item .date-overlay, .recent-post .date-overlay {
  display: none;
}

    – Kyle

    August 9, 2016 at 3:14 pm #286637
    kplusd
    Member
    Post count: 20

    That worked – thanks Kyle!

    August 9, 2016 at 3:15 pm #286638
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    No problem

  • Back to forum
    Posted in: Atelier
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register