So I’m not entirely sure why, but the icon to expand the mobile menu seems to be positioned way too far at the right of the page, to the extent that it’s being cut off and only the edge of the icon is visible to click. This happens when I view in on my Samsung Galaxy S3, but also when I view it in Chrome on the developer/mobile view.
http://wp.studentcaffe.com
How would I go about moving the mobile menu link so that it is aligned to the actual right edge of the page, instead of being cut off?
Hi Studentcaffe
Thanks for your question.
We recommend starting by resolving the duplication of the Vantage style.css file. In your child theme style.css file below the @import statement, you’ve inserted the entire parent style.css file. This can cause problems with updates and is an unnecessary duplication.
Are all of your Custom CSS rules contained at AppearanceCustom CSS? Or have you also made edits to the rules in the style.css file in your child theme?
Custom CSS did not work when I attempted to use it (none of the changes actually updated the page appearance), so all of my changes are in the child theme’s CSS file. I have removed the duplicate entries, so the only rules present now are the ones I tweaked or added.
Thanks for your effort. It looks as though the core style.css file has been edited. The source of this problem lies in one of those edits.
Here is your link to the latest premium ZIP file:
Private Snippet
Ideally, activate the Vantage parent theme, go to Appearance > Editor and replace the contents of style.css with the contents of the original which you can get from the ZIP.
Okay, I seem to have fixed the issue with the mobile menu being cut off (there was an incorrect padding in the ‘main’ div) but now I have another question about why my logo isn’t resizing with the responsive options enabled– should I continue in this thread, or create a new one?
We’ll take a look shortly. There isn’t any default styling to resize the logo. It’s something we’ll need to add.
Add the following and adjust as required:
@media (max-width: 680px) { #masthead.masthead-logo-in-menu .logo > img.logo-no-height-constrain { max-height: 50px; } }Great, another issue fixed! Just two more things now.
One: My search bar icon goes away when I drop down to smaller dimensions, but I would like it to still be visible. It seems to disappear as soon as the dimensions drop to 1075 pixels wide. What rules should I be changing or adding for that?
Two: I’d like to try to vertically align my navigation menu and search icon to sit at the bottom of my masthead instead of at the top. What element(s) do I need to adjust for that?
Try:
1:
@media (max-width: 1080px) { body.responsive #masthead.masthead-logo-in-menu #search-icon-icon { display: block; } } @media (max-width: 770px) { body.responsive #masthead.masthead-logo-in-menu #search-icon-icon { display: none; } }2. Try adding the following:
#masthead.masthead-logo-in-menu .logo { padding-top: 10px; padding-bottom: 10px; }Then go to Appearance > Customize > Theme Design > Menu and adjust the menu padding there to position it.
The first solution works wonderfully!
However, after adding the code, when I try to adjust the menu padding, not only does the menu shift down, the logo does as well. I’d like the logo to stay in place and ONLY the menu and search button to move down. Any ideas?
Sure. Change the second rule to use !important.
#masthead.masthead-logo-in-menu .logo { padding-top: 10px !important; padding-bottom: 10px !important; }The following rule in your child style.css file is preventing the search icon from aligning with the rest of the menu:
#search-icon #search-icon-icon { height: auto; display: inline-block; padding-top: 35px; }Okay, so the menu and search icon are moving, but now the drop-down submenus have the same padding and are stretched to be way too tall. What do I need to change for that?
.main-navigation ul ul li a { padding-top: 25px; padding-bottom: 25px; }Okay, new problem now from the menu changes… When I go down to smaller desktop sizes, my menu puts the top-level navigation items on two lines and completely throws off the layout. How can I fix that?
Also on mobile view, with the padding adjusted for the menu item, it is too much padding to be in line with the scaled down logo. What rule do I need to add to shift the menu padding for mobile view?
From Appearance > Theme Settings, increase the Mobile Menu Collapse resolution. Increase it to 1020, that’ll introduce the mobile menu as the alignment changes.