Customizing Mega Menu

[kplusd]

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.

[Rui Guerreiro – SUPPORT]

Hi,

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

-Rui

[kplusd]

This reply has been marked as private.

[kplusd]

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.

[David Martin – Support]

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.

[kplusd]

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.

[David Martin – Support]

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.

[kplusd]

Thanks David – a few tweaks and everything worked!

[Rui Guerreiro – SUPPORT]

Glad it’s sorted. Thanks David.

-Rui

[kplusd]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Add this to your custom CSS:

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

– Kyle

[kplusd]

That worked – thanks Kyle!

[Kyle – SUPPORT]

No problem