-
-
Hello,
The mobile menu is not showing correctly. I can see the three lines and when I click on it, the drop menu items how, but not the main menu items. How can I correct this?
https://grninvestgrp.wpengine.com/
demo
2d00bb
Thanks,
Jessica
-
Hello,
Please add this code into your custom css box:
.menu-small ul.menu > li > a { color: #151414 !important; }The menu items are there, but they are white. That’s why you do not see them.
Best regards!
-
Thank you for your quick response!
I added the code, but still do not see the main menu items in the mobile view.
I did not see a way to specify the color for mobile view, but on the main site, I have them in gray. Why does the color not continue over to mobile?
Also, I would like the logo to be justified left and the menu on the right same as on the desktop version of the site. Where would I adjust this in the theme?
-
Hello,
-The menu items show up just right in mobile. Please see screenshot: https://pho.to/AjpMt
-You can style the mobile drop-down menu in General Options > Header Options > Dropdown Options.
-Please add this code into your custom css box to reverse the positions of logo and mobile menu:@media (max-width: 480px){ #logo { float: left !important; } .mobile_small_menu.open { margin-left: 80% !important; } .mobile_small_menu.close { margin-left: 80% !important; }}Result screenshot: https://pho.to/AjpN8
Best regards!
-
Hello,
Yes! I found the mobile drop menu options. They were call mega menu, which I had not used and thought would not apply to the mobile menu.
The code for the left justified logo and right menu worked, thank you!
One more question for you, in the Top Widgetized Area, on the desktop, it shows a get started link and phone number at the top left in green. But the mobile view does not display this. Is there a way to have this display in the mobile view as well?
Thanks again for all the help!
Jessica
-
Hello,
The Top Widgetized are is not shown in mobile by default. Because of the lack of space. To add it back, add this code into your custom css box:
@media (max-width: 767px){ .top_nav { display: block !important; }}Let us know.
Best regards!
-
That code did not work, but that is ok, I found a work around.
In a previous reply, you sent this code so that I could have the logo display on the left with the 3 lines indicating the menu on the right.
<span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”>@media (max-width: 480px){</span><br style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;” /><span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”>#logo {</span><br style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;” /><span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”> float: left !important;</span><br style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;” /><span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”>}</span><br style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;” /><span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”>.mobile_small_menu.open {</span><br style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;” /><span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”> margin-left: 80% !important;</span><br style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;” /><span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”>}</span><br style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;” /><span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”>.mobile_small_menu.close {</span><br style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;” /><span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”> margin-left: 80% !important;</span><br style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;” /><span style=”color: #000000; font-family: ArialMT; font-size: 12px; text-size-adjust: auto;”>}}</span>
It worked great! But today, the three lines are showing up over the lego on the left. Can you help me correct this?
Thanks,
Jessica
-
You must be logged in to reply to this topic.