Displaying header/menu in mobile version

  • Unknown's avatar
    andrea100sec · Member ·

    Thanks to everyone for the continued help! Riddle me this….

    Our website is finally almost locked in style wise and we are interested in changing how it appears in mobile.

    Right now, when we go to mobile, we lose our header/logo and menu that live on the top of all our web pages (instead there is a blue drop down).

    Is there a way to make the header appear with the hamburger menu or regular menu when the site goes into mobile?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    andrea100sec · Member ·

    I’m also interested in making our embedded video on mobile have black borders. I added css to when customizing the site, but I know those changes don’t affect the mobile version. Is there a trick from writing css specifically for mobile? Would I just copy and paste the css I used to alter the embedded videos to the site and put “@media (min-width: 960px)” in front of it? Thanks in advance!!!

  • Unknown's avatar
    thesacredpath · Member ·

    Is there a way to make the header appear with the hamburger menu or regular menu when the site goes into mobile?

    In general, the reason the normal menu changes on mobiles is to make it as easy as possible for those on touch devices to navigate, and with the normal menu, things get pretty tiny, and if you are using submenus, that gets even more complex for those on touch devices.

    We can replace “Menu” with a hamburger style menu icon with the following CSS. 

    .mobile-theme .menu-toggle:before {
	content: 'f419';
	visibility: visible;
	font-family: genericons;
	font-size: 130%;
}

    On the logo, the mobile theme doesn’t support site logos, which is why it isn’t appearing. My first suggestion is to go to Settings > General and add in a site title and tagline. You can then hide that site title and tagline by going to Customize > Site Title, Tagline & Logo and at the bottom, uncheck “Display Header Text” and save. That way your site has a title that the search engines can see, although your visitors won’t see that text.
    We can add your logo to the mobile theme with the following CSS. 

    .mobile-theme #branding {
	background: url('https://100sectest.files.wordpress.com/2015/09/logo-website-header.jpg') no-repeat scroll center top /contain #fff;
}
  • Unknown's avatar
    andrea100sec · Member ·

    Thanks for your answer. This is leading me to a more general wordpress.com/template/css question.

    I have made some styling changes to my main site using CSS, and it is basically exactly how we want it. When I select “use this CSS in mobile” the edits I have made to the main site really throw off the mobile version (and sadly the edit above still did not get the logo image to show). I am wondering if there is a way for me to make all of the edits I have doe for the regular/non-mobile site apply only to non-mobile screens, so that the mobile version in the template will be unaffected, but I can still add in header using customized CSS?

    Also, any thoughts on why the above css for the logo to appear did not affect the mobile version, even after I clicked “use this CSS for mobile”?

    Thank you!

  • Unknown's avatar
    andrea100sec · Member ·

    And just to verify. There is no way to have the mobile version so our header/menu as it looks on regular computer screens? (I understand it would be trickier to click on, but just wanting to verify, as my boss really likes/wants that look if possible).

    Thanks!

  • kathrynwp · Staff ·

    When I select “use this CSS in mobile” the edits I have made to the main site really throw off the mobile version (and sadly the edit above still did not get the logo image to show).

    That checkbox only applies if you’ve activated the separate mobile theme, which I see that you’ve done. Activating the separate mobile theme is only recommended if you’re using an older, non-responsive theme, which doesn’t automatically adjust for various screen sizes. Canard is a responsive theme, so I’m not clear on why you’ve chosen to activate the mobile theme, because it’s not necessary with Canard to do that. Canard should look good on devices of all sizes.

    I am wondering if there is a way for me to make all of the edits I have doe for the regular/non-mobile site apply only to non-mobile screens, so that the mobile version in the template will be unaffected, but I can still add in header using customized CSS?

    Yes, you can wrap any parts of your CSS you like in a media query so they apply only to larger screens. You can learn more about using media queries that target certain screen sizes here:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Responsive Design with CSS3 Media Queries

  • kathrynwp · Staff ·

    I am wondering if there is a way for me to make all of the edits I have doe for the regular/non-mobile site apply only to non-mobile screens, so that the mobile version in the template will be unaffected, but I can still add in header using customized CSS?

    If for some reason you decide to keep the mobile theme active, prefacing your CSS with .mobile-theme restricts it to the mobile theme, as in the examples thesacredpath gave you earlier.

  • kathrynwp · Staff ·

    Also, any thoughts on why the above css for the logo to appear did not affect the mobile version, even after I clicked “use this CSS for mobile”?

    I think the #branding element in the mobile theme is only output if you’ve uploaded a custom header.

    At this point I’d really recommend you deactivate the mobile theme and instead use media queries to restrict whatever CSS you want to apply only to specific screen sizes. It’s much easier to do, is less “hacky,” and will provide your visitors with both a better mobile experience and a more well-branded mobile site, in keeping with the desktop version.

  • Unknown's avatar
    andrea100sec · Member ·

    Thank you so much! This is a huge help. Deactivating the mobile theme changed everything! Really appreciate the help/answers from everyone. Thank you!

  • kathrynwp · Staff ·

    Wonderful, glad you’re set! Feel free to start a new thread if you need help with anything else.

  • The topic ‘Displaying header/menu in mobile version’ is closed to new replies.