Home Forums Weaver Xtreme Theme Featured images in submenus

Topic Resolution: Resolved

This topic contains 18 replies, has 3 voices, and was last updated by  scrambler 1 week, 6 days ago.

Viewing 16 posts - 1 through 16 (of 19 total)
  • Author
    Posts
  • #51313

    Remus
    Participant

    Hi!

    Is there a way to add thumbnails in a submenu? It could be really cool that hovering on a menu, will show featured images of posts belonging to that category.

    #51319

    scrambler
    Moderator

    Yes it is, as long as you create your menu using WordPress Custom menus in Appearance Menus. It does depend on what you exactly want.

    1- If you want an image permanently with the menu item label, then you can just go there, open the menu item, and type your HTML in the Label box. Something like

    <img style=”margin-right:5px;” src=”ImageUrl” />Menu Label

    2- If you only want the image to show up on hover, then INSTEAD of the above, you need to add a class to that menu item using the class box found below the label box. Something like mycat1  . If you don’t see the class box, check the option in the Screen Options at the top.

    Then you add a CSS rule like below to the theme Global Custom CSS Rule box

    .mycat1:hover {background:url(ImageUrl) no-repeat left center;padding-left:40px;}

    #51324

    Remus
    Participant

    Thanks for the reply. This doesn’t do the job. I am talking about a submenu that shows its categories if any, and aside it, four featured images that links to their post.

    If there are no subcategories, a single row with five featured images on entire width of the main menu, may be favourite posts.

    This could be a new feature for the theme.

    #51325
    Private Reply

    Remus
    Participant
    This reply has been marked as private.
    #51326

    Weaver
    Keymaster

    I think there could be premium menu plugins that can do that sort of thing, but there is really noting available in Weaver Xtreme to easily build such menus.

    #51327

    scrambler
    Moderator

    It looks like the reference site is using a plugin like Mega Menus.

    As weaver said, there is no easy way to do exactly that with Xtreme, but you could display the last n posts in the sub menu, using the Xtreme Mega menu feature.
    It wont let you browse through all posts like in the reference site.

    For example, to have a menu Item that shows the last 3 posts title and featured image when hovering, you could do the following.

    • Use the Weaver Show posts plugin to create a filter that display the last 3 posts of a specific category, in 3 columns, and as Title + featured image
    • In Appearance > Menu, create a custom Link menu Item
    • Type # in the URL box, and give it the Label you want (like the category name).
    • Then open that menu Item, and in the Class Box type the two class names (separated by a space) mega-menu list1 (activate the class option in the screen option if the class box is not there)
    • Then in the Description box of the menu label, paste the Show Post filter shortcode (found at the top of the filter option page) like [show_posts filter=”filterName“]
    • Then put the CSS rule below in the Page editing page > Weaver Xtreme Plus Per Page Options > per page style box, to size and position the sub menu, adjusting the values to your liking.
      .list1 .mega-menu {width:600px;left:-400px;}

     

    #51328

    Remus
    Participant

    Something is wrong. Where should I add the last css more exactly, just any page? Even when added to Front Page, the menu is ugly, and still has titles and even Post Meta Info.

    #51329

    scrambler
    Moderator

    The CSS goes in Main options > Fonts & Custom > Custom CSS Rule Box, but the issue is that you are using smart menus which has overriding CSS.

    To make it work, change the rules to

    .list1 .mega-menu {width:600px !important;max-width:none !important;}

    If you don’t want to see the post meta info, you need to check the hide options for that in the filter

    It will probably need additional CSS to change the font size of the title with the rule below

    .list1 .mega-menu .post-title {font-size:80%;}

     

    #51333

    Remus
    Participant

    The tricky part is done. I just need to center the submenu, if I move the custom link to the right, the submenu get out of header space.

    Thank you both so much for helping!

    #51335

    scrambler
    Moderator

    Here is revised CSS to make the width responsive, and the left position correct

    .list1 .mega-menu {width:600px !important;width:80vw !important;max-width:600px !important;margin-left:0 !important;}

    • the width in pixel is for old browsers compatibility
    • the with in viewport unit makes it proportional to the viewport
    • the max-width limit how big it gets on very large viewport
    • the margin overwrites the smart menu margin
    #51337

    Remus
    Participant

    width:80vw  never seen it until now, first second I thought it’s a typo 🙂

    EDIT: I would prefer the full width of menu as the source site, so the details of the pictures could be observed.

    #51340

    scrambler
    Moderator

    EDIT: I would prefer the full width of menu as the source site, so the details of the pictures could be observed.”

    No idea what you mean, but I noticed that you are missing the CSS for the 5 columns in the mega menu.

    If you want the show posts to display in 5 columns in the mega menu, you need to add similar CSS to what you had added for the one page showing them in its content area.

    You can use the specialized rules below to only affect the show posts inside the mega menu.

    .mega-menu .atw-show-posts article ~ div {display:none;}
    .mega-menu .atw-show-posts article {box-sizing:border-box;}
    .is-desktop .mega-menu .atw-show-posts article {float:left;width:19.2%;margin-right:1%;}
    .is-desktop .mega-menu .atw-show-posts article:nth-of-type(5n) {margin-right:0;}
    .is-desktop .mega-menu .atw-show-posts article:nth-of-type(5n+1) {clear:both;}
    .is-smalltablet .mega-menu .atw-show-posts article {float:left;width:32.66%;margin-right:1%;clear:none;}
    .is-smalltablet .mega-menu .atw-show-posts article:nth-of-type(3n) {margin-right:0;}
    .is-smalltablet .mega-menu .atw-show-posts article:nth-of-type(3n+1) {clear:both;}
    .is-phone .mega-menu .atw-show-posts article {float:left;width:49.5%;margin-right:1%;clear:none;}
    .is-phone .mega-menu .atw-show-posts article:nth-of-type(2n) {margin-right:0;}
    .is-phone .mega-menu .atw-show-posts article:nth-of-type(2n+1) {clear:both;}

    If you don’t want space between the items, you can simplify the rules as below:

    .mega-menu .atw-show-posts article ~ div {display:none;}
    .mega-menu .atw-show-posts article {box-sizing:border-box;}
    .is-desktop .mega-menu .atw-show-posts article {float:left;width:20%;}
    .is-desktop .mega-menu .atw-show-posts article:nth-of-type(5n+1) {clear:both;}
    .is-smalltablet .mega-menu .atw-show-posts article {float:left;width:33.3%;clear:none;}
    .is-smalltablet .mega-menu .atw-show-posts article:nth-of-type(3n+1) {clear:both;}
    .is-phone .mega-menu .atw-show-posts article {float:left;width:50%;clear:none;}
    .is-phone .mega-menu .atw-show-posts article:nth-of-type(2n+1) {clear:both;}

     

    #51341

    scrambler
    Moderator

    As for positioning and size of the Mega menu, I think you will need to use two sets of rules:

    One for when the browser is larger than the wrapper that fixes the mega menu width to the wrapper width, and moves it left to the edge of the wrapper.

    And one for when the browser is smaller that the wrapper max width of 1165px, that sets the width to 100% if the viewport and moves it to the left edge.

    These rules (below) need to replace the previous rule starting with .list1 .mega-menu {width:600px…..}

    New rules would be:

    @media all and (max-width:1165px) {
    .list1 .mega-menu {width:580px !important;width:100vw !important;margin-left:-470 !important;}
    }

    @media all and (min-width:1166px) {
    .list1 .mega-menu {width:1165px !important; margin-left:-470px !important;}
    }

    The margin left of -470px needs to be changed depending where the menu item is located in the menu bar, as to move the mega menu to the edge of the wrapper.

    #51346

    Remus
    Participant

    “EDIT: I would prefer the full width of menu as the source site, so the details of the pictures could be observed.”

    No idea what you mean,

    I need to extend the submenu  on the almost entire width of the header area. Like 1100px as it is on the source site.

    #51349

    scrambler
    Moderator

    The last rules I gave you need max-width none, also, the first margin-left was missing a pxmake them

    @media all and (max-width:1165px) {
    .list1 .mega-menu {width:580px !important;width:100vw !important;margin-left:-470px !important;max-width:none !important;}
    }

    @media all and (min-width:1166px) {
    .list1 .mega-menu {width:1165px !important; margin-left:-470px !important;max-width:none !important;}
    }

    #51371

    Remus
    Participant

    Maybe it could be an idea that the arrow being shown according to the position of the parent category.

    Other than that, I really didn’t expected so much progress. Your skill make people very happy! Thanks 😉

Viewing 16 posts - 1 through 16 (of 19 total)

You must be logged in to reply to this topic.