Drop down menu or drop down filter on blog page

[fatcatgraphics]

Hey there,
How could I add a category drop down menu or drop down filter on the blog page? As well as a search bar?
http://2e6.274.myftpupload.com/blog/
TIA! Rena

[thai]

Hi There,

To achieve that, please create a header then assign it to the blog page:

After adding the logo and the navigation inline elements, you can add the dropdown menu and search inline element:

Hope it helps

[fatcatgraphics]

Awesome, that worked out great. I created it for my blog page. But theres just a few things I cant figure out. If you visit it http://2e6.274.myftpupload.com/blog/
you will see that its cutting off the posts below it. I cant figure out why.
I also cant figure out how to remove the spacing between the nav links and the “fat Cats Blog”

Thanks for your help,
Ren

[ruenel]

Hello Ren,

Thanks for updating in!

You are having this issue because the position of your bar is absolute. Please edit your header and make sure that the last bar containing the search and drop down element is positioned “Relative”.

Please let us know if this works out for you.

[fatcatgraphics]

Ok that did the trick. Thank you. I do have another issue. Between the navbar and the blog image im trying to reduce the spacing. But due to z-index either the blog image gets cut off on top or if i make the blog image a higher z-index then the drop down menu then the dropdown is behind the blog image.
What am i doing wrong??

Also I have social media icons on top, how do i float them to the right side of the screen?

TIA
Rena

[rad]

Hi Rena,

With that setup (width height restriction on a smaller screen), I recommend adding multiple header bars and assign it for each device (desktop, mobile). The current header bar will your desktop, then your second header bar will be for mobile and with that, you can add all element on the same container stacking them together (like how columns are stacked to the single column when viewed on a smaller device).

You can utilize the Hide During Breakpoints feature to control the device visibility of your header bars.

Simply hide the header bar meant for desktop from mobile view, and hide the header bar meant for mobile from desktop view. And the only solution on that issue is arranging the elements per device view.

Thanks!