Header Options

  • Author
    Posts
  • #3054286

    Hi,
    As you see on mobile, that there is a header, that stays in the heading area (as normal). I wanted the menu to be a sticky menu (on mobile) since this already happens on desktops. I hope you can help me out.

    Thanks,
    Jamie.

    The blog I need help with is realsimpleway.com.

    #3054384

    sfmerv
    Member

    Try this code in the custom css

    .header-small {
        position: fixed !important;
    }

    Also it looks like you are hosted on Peer1 hosting. These forum are for WordPress.com site. I think you are looking for WordPress.org support which can be found here
    https://wordpress.org/support/

    Here is an article explaining the difference between WordPress.com and WordPress.com
    https://en.support.wordpress.com/com-vs-org/

    #3054385

    Hi,

    Thanks! I use WordPress.com, so I don’t have to worry about that. Thanks for your help. I wanted help from a Happiness Engineer/Staff, do they could better understand our problem, and our issue.

    Thanks,
    Jamie.

    #3054386

    sfmerv
    Member

    You might need to write a media query for that also I only tried it in the inspector on my browser.

    so something like
    @media only screen and (max-width: 768px) {
    .header-small {
    position: fixed !important;
    }
    }

    #3054387

    Thank you! It helped! I appreciate your help with me today :)

    #3054388

    Can you also please make the header menu much smaller on desktop + be able and make it shorter on mobile with some CSS as well please?

    #3054396

    For desktop, find this in your custom CSS and change the max-height to 90px.

    #header{
        max-height:90px;
    }

    Then add the following two rules.

    #header.header-large .menu-container {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .content.no-thumb, .no-thumb {
        padding-top: 80px;
    }

    Then for mobile, add the following and see what you think.

    @media screen and (max-width: 1024px) {
        .content.no-thumb {
            padding-top: 0;
        }
    }

    #3054404

    Hi! It worked for desktop, but not for mobile. Thanks for that CSS. Please help me out.

    Thanks,
    Jamie

    #3054416

    When you say, mobile, are you talking about the height of the header, or the height of the menu itself after you click on the menu button?

    #3054417

    The Height of the Header.

    #3054646

    The height of the header on your site, as I see it now, looks good. Did you get this resolved? I looked at it on iPhone and Android device and they look the same.

    #3054648

    Hi,

    Thanks! It is good :) So, ad your looking on your iPhone, you will see that the site title is too big for the logo and title to fit in one line. Is there a way to decrease the size for: ONLY for the site title, and ONLY for mobile?

    Thanks!
    Jamie.

    #3054652

    Hi there, I’m not seeing a logo, only a site title and the menu icon when viewing on mobile. The following will allow you to adjust the site title only on mobile (I’ve used 480px as the media query break point). You can adjust the 20px value as desired. Originally it was 28px.

    @media screen and (max-width: 480px) {
    	.site-title a {
    		font-size: 20px;
    	}
    }

    #3054653

    Hi,

    As you go on the website, on a mobile device (maybe computer) you will see the difference. The site logo, is above the title, which I don’t like.

    Can you please help me out?

    Thank you!

    #3054667

    supernovia
    Staff

    Hi @realsimpleway, could you get a screenshot of what you’re seeing?

    Also, have you considered using the text in your logo image itself? That way you’ll have more control over it.

    #3054669

    Hi,

    Sure! Here is a screenshot;

    blob:https://wordpress.com/fcfd661b-c940-43e9-a047-385a4baeece7

    We didn’t use the text in the logo, since we don’t feel confident in it.

    Thanks,
    Billy!

    #3054677

    supernovia
    Staff

    That link wasn’t formed correctly.

    If you want the text to align with the logo in a particular way, you will want to include it with the logo.

    #3054680

    Hi,

    Thanks. Can I please get some CSS help on how to change my site header title color(s) (Navigation Menu, and Site title) to change the colors? Currently, it’s dark purple.

    #3054684

    supernovia
    Staff

    Are you unable to change that in Customize > Colors ?

    #3054685

    Hi,

    You can change it in the Customizer? If so, can you show me the steps to get the color changed for the site header color,

The topic ‘Header Options’ is closed to new replies.