Theme – Vantage Free – christinaames.com
ISSUE 1. Remove Extra Top Bar Added to Mobile Menu.
My main menu is centered at the bottom of the masthead below a SiteOrigin Editor Widget that contains an image with the site title and tagline.
This appears on every page (5 pages at this time).
When I collapse the view to mobile in both Live Editor view or Customize view, the menu is set to Mobile Menu (inside Appearance>Customize>Theme Design>Navigation), the mobile menu appears, but there is an extra top bar above it that I want to, but can’t remove.
This top bar is not present in computer or tablet view.
ISSUE 2. Set Different Colored Menu for Home Page.
I am building a new HOME page (not yet published) that will have the same masthead described above, but the SiteOrigin Editor Widget will be hidden, leaving only the centered menu.
Per one of your posts, I downloaded WooSidebars to hide this widget (by adding a new widget targeted at the masthead of that new HOME page only).
The result worked perfectly to hide the widget on that page and leave the centered menu.
I would like to change the background color and text color of the new Home Page menu, but any changes to it carry over to the other 4 pages. I intend to leave all other parameters the same as they already are on all pages (position, size, padding, fonts, etc.).
FYI – Failed Attempts
On Issue 1, I tried site origin custom CSS, and that didn’t work, and I also could not find a solution on your site or elsewhere.
On Issue 2, I installed Max Mega Menu, set the background and text colors and enabled it in Menus. It changed the main menu on all pages, and was boxed, which is not like the current menu nor what I want. I tried using WooSidebars, which can be directed at Max Mega Menu, but I am not actually using a Max widget – I only enabled Max on the Menu page to apply to the Main Menu.
So, help ASAP, and thanks.
I am happy to send a screenshot of the mobile menu view of the new Home page so you can see the extra top bar (gray) that is above the white menu, but the page is unpublished for now.
Thanks
Hi Cames,
1. You can remove this spacing by adding some custom CSS to your website. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:
.main-navigation ul li a.mobilenav-main-link { padding: 0; }You might also need to install the SiteOrigin CSS Editor.
2. I’d like to help you with this, unfortunately, this is beyond the scope of the support we’re able to offer on our free forums. There is a fair amount of custom work involved.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.
If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable. They’ll charge you an hourly rate for any work done.
Thanks, Alex.
Sometime later today, I will try your suggestion on removing the extra top bar from the mobile menu and get back to you on the result.
On issue #2, I understand your point, but thought there might be a woosidebars solution to conditioning the background and text color changes to the new home page only, or conversely, directing no such color changes to all other pages – a simple enough fix (in theory).
I have an issue #3 – Is there a way to superimpose a menu over the top portion of a hero widget background image that is in a pagebuilder row that is full width stretched?
Thanks again!
Alex –
I just tried your custom CSS to remove the extra top bar that somehow gets added to the mobile menu when collapsing, but is not there in the computer or tablet views.
It did NOT work.
It merely removed top padding from the menu bar in the mobile menu.
The top bar on need remove is an actual extra bar the same pixel height as the mobile menu bar, and it is a different color (menu background is white, added top bar is gray, and menu background inside theme settings is white). To be clear (and redundant I guess, there is an extra bar appearing from nowhere only in mobile view.
Hi Cames,
1. Can you please provide me with a screenshot of the top bar highlighted? I suspect I’m trying to adjust something other than the space you’re looking to remove. Please note that we’re currently unable to process attachments so you’ll need to upload the screenshot to a third party image hosting site like Imgur or vgy.me.
3. I’d like to help you with this, but unfortunately, Vantage doesn’t support this out of the box so it’ll require some custom coding. This is beyond the scope of the support we’re able to offer on our free forums.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.
As an alternative, consider switching to the SiteOrigin North which features this functionality out of the box.
If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable. They’ll charge you an hourly rate for any work done.
Alex –
Partial screenshot of mobile view showing mobile menu bar and additional gray topbar above it that shows only in mobile view.
https://vgy.me/u/TYNTAr
Partial screenshot of computer view showing menu bar at top and no topbar above it.https://vgy.me/u/SaiVAt
I need to remove that additional topbar that shows up in mobile view.
FYI, my hero widget has the background image shown, with a gray background (#333333) behind it with the image set to 50% opacity for effect.
Is it possible that the gray background is peaking through the top in mobile view?
Thanks, Alex
Hi Cames,
Unfortunately, I’m not too sure what is adding that and I can’t replicate it locally. Would it be possible for you to create a temporary admin account for us so we can log in and take a look?
I’d like to help you with this, but unfortunately, Vantage doesn’t support this out of the box so it’ll require some custom coding. This is beyond the scope of the support we’re able to offer on our free forums.
This is a private message.
This is a private message.
Thanks, Alex.
I just added you as an admin following your instructions
I checked the box to email you with the auto-generated password (which is crazy long).
The page you want to focus on is named "HOME TEST – draft." As I said it is unpublished.
You will see that the menu on that page and the published site pages is in the masthead, which as I said also contains a siteorigin editor widget with an image of the website title/name and tagline, BUT . . .
the widget on this draft page is hidden by using the woosidebars plugin to create a "blank" masthead that covers/replaces the widget image, leaving the menu bar all alone at the top of the page.
When the menu bar is collapsed to the mobile menu, that is when the topbar appears out of nowhere.
I must add that this can be seen in the customize mobile view for this draft page and the live editor mobile view (although the live editor view does not collapse the menu pages to the mobile menu icon).
I also must add that these two views are not "real" phone views (the phone views show more of the image, although the real phone view still shows the added gray topbar).
Hi Cames,
Please add the following CSS to WP AdminAppearanceCustom CSS:
body.responsive #masthead .hgroup .support-text { display: none; }How does that look?
YES!! AND THANKS!!
Now I just need to create a transparent menu over the top of the hero image, and not have it change the masthead/menu setup on the other pages? Are you sure you can't help?
Even if unable to, please build that into the hero image since it's a front page feature and these elements are basic, in-demand ones that will take it over the top!
Hi Cames,
Great to hear that helped! :)
I’d like to help you with that, but unfortunately, this is beyond the scope of the support we’re able to offer on our free forums. There is a fair amount of custom work involved.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.
If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable. They’ll charge you an hourly rate for any work done.
Thanks, Alex.
I have no problem buying a theme. My issue is that I don't know whether the Vantage Premium theme is the one that will meet my immediate future needs. .
Because I am an actor, singer and writer, my website isn't commercial,
social or newsy. It functions primarily as an online audition site with my resume and various media productions.
For that reason it must be simple and clean, so bells and whistles generally are unnecessary. Bread and butter functions for menus,
hero images, resumes, videos, audio players (for voiceover demos and for pop songs, which demand two different types of players, the former with download functions and the latter without – and not for commercial promotion of either, as that is done elsewhere.)
Perhaps you can recommend one of your themes that offers all this?
Thanks again
Hi Cames,
I completely understand, but unfortunately, this isn’t possible with Vantage without custom coding.
SiteOrigin North will allow you to create this overlap effect. You can create this effect by adjusting your Page Settings and setting Menu Position to Overlap – this will actually allow you to overlap any widget and not just the SiteOrigin Hero widget.
Thanks, Alex.
I downloaded and did a live preview of Siteorigin North. If I eliminate my header widget and use SiteOrigin Custom CSS I believe I can nearly duplicate the site as it is with Vantage, with minor differences (spacing is slightly different and the galleries have space between pics and borders, just to name a few that might even be changeable).
So, the question is whether Siteorigin North will allow me to hide its standard header (site title, tagline and main menu) for the new front-page (the one you helped with called HOME TEST – Draft) and instead add transparent, centered menu over the hero image on that page, and leave the other pages as is, i.e., with the centered site title, tagline and menu at the top. I guess the other question is whether this will all collapse to mobile view as well (with no header or menu differences, except for a mobile menu, i.e., hamburger).
If so, I would surely activate North and redo the site.
Hi Cames,
It’s possible to hide the masthead on a page by page basis by adjusting our page settings. You’ll need to use CSS to make the masthead transparent. Everything else you mentioned is possible.
If you haven’t already, I would recommend giving the SiteOrigin North documentation a quick read.
Thanks, will read documentation.
So, to be clear – front page – transparent menu atop hero image with white text; all other pages – white masthead with standard bar menu,
centered site title and tagline above menu with grey text.
Mobile view – front page – transparent mobile menu (hamburger) atop hero image with white text; all other pages, white masthead with gray mobile menu, centered site title and tagline above same; and slide out of full menu will be the same for all pages.
Hi Cames,
Yes, that’s completely doable. You may, as mentioned, need to use add some CSS to do certain things (such as adjusting the masthead transparent on your home page).
Thanks, Alex.
Hi Cames,
No problem. :)
Please be sure to post another thread if you have any other questions.
Thanks, Alex.
Further to my prior question about changing the front-page menu background and text colors while leaving the other pages as is, I found the following link on your site – "How to change main navigation text and hover colors for separate items?".
Andrew Misplon provided custom CSS that I copied and modified and it worked with one exception.
I changed the front-page background color of the menu bar to #323232,
and the link text to #ffffff, with the background color the menu bar when hovering staying at #323232 and the link text hover color changing to #a8a8a8. The other pages kept the white background of the menu bar and the #323232 link text color changing on hover to
#a8a8a8.
The exception was that the active page menu bar segment had a white background! I do not want the active page background color to change from #323232. I tried the following two versions of CSS to prevent that, but it did not work.
home. main-navigation .active { background-color: #323232 }
home. main-navigation .active >a { background-color: #323232 }
Can you help with this one remaining item?
I didn't start a new thread since my initial request included help for this, and I didn't continue the thread that turned up in my search.
If you want me to move this to either, let me know.
Thanks again
Alex –
Further to my email about the front-page menu, I believe I solved the problem. I was not aware that a:active was the wrong instruction and that a:visited was the right one.
So, for your comment or others reading this thread, here is the custom
CSS I added that changed the front-page menu in the vantage free theme without changing the menu on any other page of the website. The net result was that I changed the menu bar background-color and hover background-color from white to gray, and changed the text/links from gray to white, in each case for the front-page only. The text/links hover color remained unchanged as light gray for all pages.
/* HOME MENU */
home. main-navigation { background-color: #323232;}
home. main-navigation a { color: #ffffff;}
home. main-navigation ul li:hover >a { background-color: #323232;
color: #a8a8a8;}
home. main-navigation a:visited { background-color: #323232;}
Hi Cames,
I’m glad to hear you were able to get that CSS working as desired. I’m sorry I wasn’t able to be of assistance this time. Please be sure to post another thread if you have any other questions.
Hi Alex –
I started a new thread Sunday, but Andrew seemed to blow me off without even reading through my issue. I know you guys are busy and often react on the basis of the subject heading of a support request
(and mine may not have been clear and succinct). I am hoping to get a better response from you.
On my new test homepage I am using a hero widget inside a layout builder widget (it is unpublished, but I can create a user account or send the page, if you like) Both rows for these widgets are set to full-width stretched per the info on your site.
My issue is that when the window is resized to full on my MacBook Pro,
the background image in the hero widget (full size, cover) scales behind the header and footer, cutting off the top and bottom. Can this be avoided?
I noticed in the hero widget examples that your site offers as reference, the same thing happens. I also point out that the apple home page hero image does not do this – the top and bottom portions of that image do not "disappear" behind the header and footer.
I also notice that the scaling on the apple image shrinks the image and text as the screen size is made smaller (it seems to "jump" down a size as this happens), but the responsiveness of the siteorigin hero image doesn't quite shrink the same way.
Anyway, my issue is a very basic, core issue of how the hero widget functions, so it would seem that you can help.
Many thanks
Hi Cames,
Unfortunately, what Andrew said is correct. I would recommend giving the article Andrew linked ()Create a Fullscreen Slider with the SiteOrigin Hero Widget) a quick read as it outlines why this is happening – specifically, read the Responsive Notes section.
Apple isn’t using the same method of displaying the image as we are so it doesn’t function in the same way. Their method is a lot more “hands on”. Text added to the Hero widget will only scale when Use FitText is enabled and only headers are affected by that.
Thanks, Alex.
I did read the article, both before creating the test front-page (and followed its suggestions), and after Andrew first suggested it in his reply.
It doesn't pose a method to address the problem. So, the million dollar question is, can the problem be fixed or is it beyond the scope of the theme, or otherwise blocked by the theme?
As to the apple site, I understand the use of the FitText function,
and in fact use it in my test front-page. You may know that it affects the text only, and not the background image in my front-page.
My point about the apple hero image has nothing to do with the text, so I am sorry if that wasn't clear. The apple hero image does not change in height as the window is resized. The apple hero image maintains its height as it resizes – the margin or distance along the top of the image is always the same. With the siteorigin image, the height is reduced and the top and bottom portions disappear behind the header and footer.
All I am asking is there is a way to maintain the full height as the size is changed. I have tried limiting the height and responsive height controls regarding the background image inside the hero widget,
but maybe you can tell me I am doing something wrong?
Hi Cames,
Unfortunately, the Apple Hero you’re referring too doesn’t use the same method to display so it won’t scale in the same way. If you would like to use something similar, you’ll need to use a SiteOrigin Image or SiteOrigin Slider widget and add the text directly to the image.
If you would rather stick with the Hero widget, you’ll need to adjust your Design and Layout settings (Padding, Height and Responsive Height) that works for you. Unfortunately, I can’t provide you with exact settings as it’s very situational and hands on so it’s is beyond the scope of the support we’re able to offer on our free forums. There is a fair amount of custom work involved.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.
If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable to assist with this. They’ll charge you an hourly rate for any work done.
Thanks Alex.
I have tried the height, responsive height and padding settings inside the hero widget and they don't work no matter how much I fiddle.
You are right that a SiteOrigin Image Widget will work. I can build an image in photoshop that has the text printed on it, upload it to the WordPress media library and insert it in the widget. Having said that there should be a function for the hero widget that avoids the hidden overflow when resizing – or better yet, that should be the default. Not having that is a real shortcoming, especially since it doesn't happen with the meta slider or the image widget.
Well, lastly, is it even possible to "superimpose" a siteorigin editor widget (for text) over a siteorigin image widget, since that would require a transparent background for the editor widget? If so, what do you suggest to do that?
Thanks for trying
Hi Cames,
Alex –
You have been very responsive, and that is commendable.
But I must be honest about the support provided. I understand the need to limit support to free theme users, and I also understand the need to sell premium support. No one works for free.
Having said that, I find your support both inconsistent and random.
Here is why:
1. One of my original support requests (which combined two different questions) was to change the background and text colors of the front page menu bar without changing the menu bar on any other page.2.
Your reply included support on the simpler, first question (removing white space above the menu bar that showed only in iPhone view), but you provided a standard (scripted?) reply to the front page menu request – namely, that it was beyond the scope of support for free theme users, but I of course could get an answer by purchasing a premium support upgrade or hiring a freelancer. All well and good on its surface.3. I believe you and your colleagues can agree that this is disingenuous, inconsistent and random for two reasons: a. A subsequent search of your website turned up a support reply with specific custom CSS addressing the exact same issue I asked about regarding recoloring the front page menu! So, I believe you can see it would have been rather simple to just redirect me to the answer to my request, as it was posted by you or your colleagues! But you instead chose to suggest a premium support purchase or hiring a freelancer. b. Suggesting a premium support purchase, or alternatively, a freelancer, raises another concern. It is well settled that a private hire of a freelancer almost always is more expensive than a premium support purchase, so why suggest it? Anyone asking for help knows they can hire a freelancer. So suggesting it with the knowledge it is costly is quite disingenuous. I would like to suggest that it is more professional to simply suggest that a premium support purchase will allow access to fix any programmable issue, and leave it at that (if true). Finally, I mentioned in my last email that I felt that the hero widget had a shortcoming –
resizing caused the top and bottom of the background image to get cut off and disappear behind the header and footer. I pointed out that it was characteristic of not only my use of it, but also in the reference examples you provide when giving support. I questioned why the default wasn't to retain the full image, as hero images do –
almost exclusively On this basis I felt some explanation beyond suggesting I purchase premium support was in order. At the least, I expected a reply that said, in effect – sorry, but that's the way it was built, and there isn't a custom CSS workaround – only a code rewrite.
Anyway, I write this in the spirit of constructive criticism that I hope might help improve customer perception, and in the end, sell more themes and more support because of it.
Wordpress free themes and free plugins are replete with intentionally designed shortcomings as bait for a purchase. I don't think
SiteOrigin falls into that category, and don't want it to, hence this wordy reply.
Hi Cames,
Thank you for your reply and feedback – I’ve forwarded it to the rest of the team. Unfortunately, the support we’re able to provide on our forums is very limited due to the size of our team and the general nature of free support. We really wish we could be more helpful in all situations but sometimes we’re simply unable too due to the constantly evolving nature of our industry.
We suggest a SiteOrigin Premium upgrade and a developer to provide options. We mention the developer will be at an hourly rate so it’s implied it’ll be more expensive but certain users prefer that route due to their overall scope (meaning what they’re specifically after) and not wanting to enter into a subscription (flat one-time fee vs ongoing annual fee).
Once again, I really appreciate your feedback.