Creating a Custom Menu Bar

The standard menu bar that comes with the Ryu theme looks as follows:

RYU drop down menu

The menu categories are aligned horizontally across the screen, with a drop down menu appearing with solid black background. There is also a secondary menu button at the very top of the page. When clicked, the following appears:

full screen RYU menu

I didn’t quite like the way the┬ásecondary menu appears and how disorganized it seems, so I removed it from the display and slid the search button to the far right.

I then went on to construct a new primary menu bar, which has icons beside each menu item that change colour and rotate slightly when they’re hovered over. The new drop down menu items drop down and are able to be stacked to display all options all at once. I also gave these drop down boxes colours that match the colours in the logo.

my updated menu bar

I also constructed a new menu for mobile sized screens which lists all menu items preceded by an icon image.

mobile menu bar


Leave a Reply