Yesterday I wasted a lot of time trying to figure out something so insignificant with my online business that it is almost embarrassing to talk about. But, it demonstrates what type of learning curves we all face when building an online business.
Here was my problem: I could not figure out how to correctly add a menu bar in the header of my website in the mobile and tablet view.
It sounds like it would be really simple and easy to add a menu bar to a website. The issue is that I use WordPress for my blog website and I have not used WordPress before. It is totally new software to me. I have to learn how to do almost everything, and many things are not simple to figure out on my own.
I have used other webpage builders to build other sites before, and some are easy to use and others are more complicated with tons of features and bells and whistles.
What irritates me is when something as simple as formatting and adding a menu bar to the top of a website becomes a 2-hour project. That is right, it took me 2 hours to figure this out!
To put this into context, I added a menu bar easily enough. But on WordPress, you have three ‘view’ options to customize the menu bar: desktop, tablet, and mobile view. This allows you to see what the website looks like on a desktop computer, tablet, or mobile phone.
The menu bar looked perfect on the desktop view. But as soon as I changed the view to mobile or tablet, the menu bar showed over the top of the website content and looked terrible. I played around with the settings for a while, and nothing worked to change or adjust it properly. I was lost.
So, I went to YouTube and searched for header and footer tutorials for WordPress using the Astra theme.
In WordPress, the menu and footers are controlled by a ‘Theme’, which is a website design template you get to pick. I use Astra as the theme on my WordPress site. There are hundreds (maybe thousands?) of different themes designed by different website design companies, and it gets overwhelming to pick one.
What I do not truly understand right now is why in WordPress I have to pick a theme to create my header, but then I use another plugin on WordPress to create the webpage. It should be done all in one builder. It ends up being like learning how to use two programs to get the website designed properly. It is frustrating.
Anyway, I watched three different tutorials on how to build a header, and the third one finally gave me the answer I needed.
Astra requires a toggle button to be placed on a mobile and tablet view, instead of a regular menu bar like on the desktop view. That was the answer- the icon needs to be different on desktop and mobile/tablet views, it cannot be the same. I had to change the actual menu item I inserted into the header so that the menu bar shows up properly on the mobile view.
The answer was so simple, but still took several hours to figure out.
When building an online business, one of the heavy learning curves is learning how to build and design a website, whether it is a blog, regular website, sales funnels, or even email automation.
I am sure I will hit more headwinds like this again, but for now, I feel good that I figured it out and can move on to more important things to grow my business.