Dropdown menu rather than table display

SOLVE
Highlighted
Regular Contributor

Hi guys!

 

I have a template for a blog menu that displays different tags/categories and they're currently displayed in table form. They look great but the problem is when the screen gets resized to smaller dimensions they overflow into the next div and become hidden. I want to get rid of this problem with a dropdown menu so none of the tags are hidden. 

 

Can anyone help with this? Thanks!

 

https://www.onemint.co/blog

 

 

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Highlighted
HubSpot Employee

Hi @jayh  As it turns out, the padding CSS set for your topics menu was causing too much space between items, thereby pushing your Seasonal tag down to a second row. I was able to jump into your stylesheet located here and change the padding-left setting from 70px  to 10px (line 20155). That solved the first issue of not being able to see the Seasonal tag. 

 

The next issue is a bit more complicated and will require the help of a developer to solve. In boilerplate HubSpot templates, we use javascript to transform a standard table-based menu into the popular "hamburger" style menu. You can see that action taking place with your menu at the top of the the listing page (it transforms into a hamburger menu at mobile viewports sizes).

 

Because this is not a menu stored in an advanced menu module (technically its not even a menu), it can not use the standard javascript module to transform it into a hamburger menu. Instead you will need to alter the CSS so that the tags show in the way that you desire. You could change the template to use an advanced menu in place of what your've built, but even then, I'm not sure if the javascript would apply. Best to consult a professional designer for more advice. 

 

Thank you,

Ed Justen 

 

 


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Highlighted
Regular Contributor
(function($){
	$(document).ready(function(){

		$('.dropdown').hover(toggleDropdown);
		$('.dropdown ol').slideToggle(0);

	});

    var isMobile = window.matchMedia("(max-width: 800px)");

    if (isMobile.matches) {
			$('.dropdown').click(function(){
				$('.dropdown ol').slideToggle(0);
			});
	    }

	function toggleDropdown(e){
		var dropdown = $(this);
		dropdown.children('ol').stop(1000).slideToggle(250);
	}

})(jQuery);

Just add the dropdown class to your menu and style accordingly

5 Replies 5
Highlighted
HubSpot Employee

Hi @jayh I just visited your linked blog and was not able to recreate your issue. Can you post some screenshots of what you are expeiencing? I'll be happy to look further and advise you if I can. 

 

Thank you, 

Ed Justen


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Highlighted
Regular Contributor

blog-tags1.jpgblog-tags2.jpgblog-tags3.jpgblog-tags4.jpg

As you can see, even when the browser window is full screen the "Seasonal" tag overflows into the next section and only shows up when it's been hovered over with the cursor. As the screen is resized to mobile size all the tags except for one overflow and are hidden behind the blog post listings. I'd prefer to have a dropdown menu so this doesn't happen and the tags can still be clicked on. Any idea how this can be done within this template? 

Reply
0 Upvotes
Highlighted
HubSpot Employee

Hi @jayh  As it turns out, the padding CSS set for your topics menu was causing too much space between items, thereby pushing your Seasonal tag down to a second row. I was able to jump into your stylesheet located here and change the padding-left setting from 70px  to 10px (line 20155). That solved the first issue of not being able to see the Seasonal tag. 

 

The next issue is a bit more complicated and will require the help of a developer to solve. In boilerplate HubSpot templates, we use javascript to transform a standard table-based menu into the popular "hamburger" style menu. You can see that action taking place with your menu at the top of the the listing page (it transforms into a hamburger menu at mobile viewports sizes).

 

Because this is not a menu stored in an advanced menu module (technically its not even a menu), it can not use the standard javascript module to transform it into a hamburger menu. Instead you will need to alter the CSS so that the tags show in the way that you desire. You could change the template to use an advanced menu in place of what your've built, but even then, I'm not sure if the javascript would apply. Best to consult a professional designer for more advice. 

 

Thank you,

Ed Justen 

 

 


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Highlighted
Regular Contributor
(function($){
	$(document).ready(function(){

		$('.dropdown').hover(toggleDropdown);
		$('.dropdown ol').slideToggle(0);

	});

    var isMobile = window.matchMedia("(max-width: 800px)");

    if (isMobile.matches) {
			$('.dropdown').click(function(){
				$('.dropdown ol').slideToggle(0);
			});
	    }

	function toggleDropdown(e){
		var dropdown = $(this);
		dropdown.children('ol').stop(1000).slideToggle(250);
	}

})(jQuery);

Just add the dropdown class to your menu and style accordingly

Highlighted
HubSpot Employee

Great job @josephLayden  Thanks for jumping in! Smiley Happy

 

cc: @jayh  @roisinkirby @jennysowyrda


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes