I’ve been through all the options and having been toying with the CSS, but have yet to hit on the right combo.
Our “logo,” image as the Vantage Premium theme calls it, was a custom header that was 850px wide. Every theme I’ve ever worked with either automatically reduced the size to scale the header to fit mobile, or disabled the logo/header altogether and just showed the basic text of the site name.
When I load our site in a mobile device, it leaves the header in it’s size giving the appearance that the site is running off to the right and not properly configured for mobile/responsive.
So what do I need to change in the CSS to disable JUST the logo – not the masthead or header widgets, because I still want those to display?
And beyond that – not just disable the logo, but then give an ‘if’ to it so if the logo is disabled for mobile viewing, the site title text displays in its place?
Thanks for your time.
Heather J
Disable Logo in mobile view and only display text
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Heather
Very sorry about the late reply. We work through a prioritized forum queue, and unfortunately it’s taken us some time to get to your thread.
https://siteorigin.com/about/forum-thread-prioritization/
Because it’s been a while since you posted this, would you mind letting us know if you still need help? If so, we’ll jump right in.
Andrew,
Thank you, yes, I do still have this issue.
I made some quick fixes by changing our logo size to 300px so when it goes to mobile view, the downsize does not interfere with the responsive layout.
I'd still rather view the full header as it was designed for computers and have it default to the logo image or just text for the mobile view.
If there's a css workaround I would be most appreciative. I'm in the middle of developing 5 other sites, writing a book, writing ghost blogs,
writing ad-copy and email newsletters and booking a speaking tour for someone, so the less time I need to spend custom coding, the better. LOL
I’ll be online again tomorrow, we’re at GMT+2. If you could restore the site to it’s previous state I’ll be able to jump in and find a solution. Thanks :)
I was exploring the theme's options and found under
"Appearance>Customize>Theme Layout>Page," that the theme allows for a
"Masthead background image." Using a site we're about to develop that already has WordPress installed, I used the Vantage Premium theme, put the settings the same as I did for AnUnconventionaLife and then uploaded our header image. I toyed around with it a bit, going through the options of
"center, tile, cover," then published, and checked it on my phone and tablet. It still does the same thing. Keeps the full pixel size, does not resize for mobile layout.
I do have the option checked in the theme settings for the Responsive
Layout to be enabled.
Since Vantage allows for a logo as well as "Masthead Background image," I would like to see if there is a CSS work around to allow the Masthead background image to either be disabled if in mobile view, or auto-resized to fit a mobile device, whether that be a fixed dimension or responsive to auto-fit the user's device.
Also wondering if there is a setting somewhere that I'm missing for the masthead's alignment? If I use the logo only setting, I can set the header padding to "0" and have the logo flush with the top of of the screen,
however, when using just the masthead background image and no logo, in order to make the full image appear above the menu bar, the padding has to be set so that it ends up with a large open area at the top. It would seem the image is default set to appear at 'bottom,' or possibly center if the menu is also considered part of the padding in the header. Is there anyway to adjust this within the existing design options?
I'm going to direct you to the following site where I have recreated the settings and masthead background image in question, so it can be worked on without affecting our current site visitors – http://www.crimsonbetty.com
The problem is, unconventionalife.com is a re-launch for a strength training and fitness site that's been in biz with high volume since 2000.
We relaunched with a new name and site, our old .com is forwarding to the new .com and we did a large marketing blast to announce the new site. If I change things to alter the appearance for the worse while it's being tweaked, we're going to be hit with a ludicrous number of emails and IMs,
"… your header doesn't work in mobile view," "… hey you need to optimize for mobile devices," etc.
We tested it before we launched, and it looked fine, the header reduced and fit on all the devices we tested. Day before launch Word Press did an update, my fault, I didn't check the site after their update, and we launched the next morning. Immediately hit by emails by those on mobile devices.
I'd really rather avoid the "Please pardon our dust while we make adjustments," jpg or pop up, during our opening weeks.
I truly appreciate your helpfulness and any time you have to be able to look at it.
Thanks for the feedback.
If this is what we’re working on: http://crimsonbetty.com/, I’d suggest the following:
1. Remove your masthead background image.
2. Set masthead background color to #c1d8bc.
3. Crop your masthead background image so it’s only the logo, no extra space, add it via Theme Settings > Logo.
4. Reset Header Padding to 45.
Let me know once that’s done and I’ll take another look. Thanks.
Done
http://www.crimsonbetty.com
(Have you edited any theme files directly, at a code level? Just a quick heads up that those changes will be lost during theme updates if you don’t use a child theme and implement the changes within it.)
The edit made to the masthead is where the problem lies. The original logo class was replaced with a new class name which caused the problem.
If you go to Appearance > Editor and edit masthead.php you can replace its entire contents with the original as follows:
<?php /** * Part Name: Default Masthead */ ?> <header id="masthead" class="site-header" role="banner"> <div class="hgroup full-container"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="logo"><?php vantage_display_logo(); ?></a> <?php if( is_active_sidebar('sidebar-header') ) : ?> <div id="header-sidebar" <?php if( siteorigin_setting('logo_no_widget_overlay') ) echo 'class="no-logo-overlay"' ?>> <?php // Display the header area sidebar, and tell mobile navigation that we can use menus in here add_filter('siteorigin_mobilenav_is_valid', '__return_true'); dynamic_sidebar( 'sidebar-header' ); remove_filter('siteorigin_mobilenav_is_valid', '__return_true'); ?> </div> <?php else : ?> <div class="support-text"> <?php do_action('vantage_support_text'); ?> </div> <?php endif; ?> </div><!-- .hgroup.full-container --> <?php get_template_part( 'parts/menu', apply_filters( 'vantage_menu_type', siteorigin_setting( 'layout_menu' ) ) ); ?> </header><!-- #masthead .site-header -->That’ll resolve the problem.
My apologies, but I'm a bit confused, are you saying there was an update to the theme which affected masthead.php?
The Vantage theme I installed to CrimsonBetty, I installed directly from the Word Press Themes section. I did not alter any of the original files in Crimson Betty or AnUnconventionaLife.
Thank you for the update. I will copy and paste the above coding into the file immediately. I truly appreciate your time.
I pasted in the coding, saved, updated, deleted the cache, and reloaded,
but the logo, in the size it currently is, still does not resize on a mobile view. The padding space between the top of the logo and the bottom of it near the menu is still quite large as well.
Thanks for the feedback. Are you adding your logo using the Jetpack logo feature in the Customizer or via Appearance > Theme Settings > Logo?
If you’re using Jetpack, please, could you try deleting the logo from Appearance > Customize and add it via Appearance > Theme Settings > Logo.
I did it using the latter – Appearance>Theme Settings>Logo and I do have the first logo uploaded at 300px and the second Responsive logo at 600px as per the instructions for the theme.
Thanks again!
Could we perhaps login and take a look at: http://www.crimsonbetty.com/
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
This is a private message.
I have set up the admin role for "siteorigin," and the password has been emailed.
I deleted and re-uploaded the logo in question several times on
CrimsonBetty and it is now reducing in size in mobile view, but depending on the device, the header widgets do not necessarily work correctly. On my tablet, they simply slide over and overlap the logo. (8" screen) On my phone, the header widgets, fall in line below the logo as I believe they should, but it makes the header height size enormous and really a bit ridiculous looking on a phone display. My phone is a 5.5" display.
The padding size is still huge instead of being flush.
Is there a way to just disable the masthead in mobile view and opt to display Site Title with a small logo image in the menu bar, or have a secondary bar menu at the top of the page to replace the header widgets?
I realize the theme has the option for no masthead and just a logo in the menu bar next to the Home button, but with our logo, it makes it so small you can't tell what it is.
I apologize for making this so complicated. If I had the time to create a child of the theme and configure the CSS myself to do all this I would, I just don't right now and was hoping to find a theme that could get as much done as we wanted as far as appearance and responsiveness. So far Vantage
Premium has really fit the bill and I truly appreciate the design work that has gone into it.
Thank you again.
Thanks for the wait. I’ve added a block of CSS to Appearance > Custom CSS to adjust the header breakpoint for collapse. Give the site a try, it should do the trick.
This is a private message.