Header Options

realsimpleway · Member · Dec 9, 2017 at 12:53 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
sfmerv · Member · Dec 9, 2017 at 1:13 am
Copy link
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

WordPress.com vs. WordPress.org
realsimpleway · Member · Dec 9, 2017 at 1:17 am
Copy link
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.
sfmerv · Member · Dec 9, 2017 at 1:18 am
Copy link
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;
}
}
realsimpleway · Member · Dec 9, 2017 at 1:38 am
Copy link
Thank you! It helped! I appreciate your help with me today :)
realsimpleway · Member · Dec 9, 2017 at 1:42 am
Copy link
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?

thesacredpath · Member · Dec 9, 2017 at 10:22 am

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;
    }
}

realsimpleway · Member · Dec 9, 2017 at 1:44 pm
Copy link
Hi! It worked for desktop, but not for mobile. Thanks for that CSS. Please help me out.

Thanks,
Jamie
thesacredpath · Member · Dec 9, 2017 at 9:07 pm
Copy link
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?
realsimpleway · Member · Dec 9, 2017 at 9:14 pm
Copy link
The Height of the Header.
thesacredpath · Member · Dec 15, 2017 at 12:28 am
Copy link
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.
realsimpleway · Member · Dec 15, 2017 at 12:46 am
Copy link
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.
thesacredpath · Member · Dec 15, 2017 at 3:42 am
Copy link
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;
	}
}
```
realsimpleway · Member · Dec 15, 2017 at 4:04 am
Copy link
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!
supernovia · Staff · Dec 17, 2017 at 6:46 am
Copy link
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.
realsimpleway · Member · Dec 17, 2017 at 11:57 am
Copy link
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!
supernovia · Staff · Dec 18, 2017 at 5:21 pm
Copy link
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.
realsimpleway · Member · Dec 18, 2017 at 6:55 pm
Copy link
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.
supernovia · Staff · Dec 18, 2017 at 8:12 pm
Copy link
Are you unable to change that in Customize > Colors ?
realsimpleway · Member · Dec 18, 2017 at 8:42 pm
Copy link
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,

1 2

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

WordPress.com forums

Header Options