fixed header bar in Axon theme
-
Hi,
How do I make the bar at the top of Axon theme a bit smaller?It is animated: once a viewer scrolls down, the bar changes to an abbreviated amount of info, BUT it still stays very wide, obscuring the page content.
I’ve found a bunch of .sitebar CSS coding, but don’t know how to set it up to get desired effect.
thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there,
It seems that you’re using the following custom CSS code:
.site-branding { width: 350px; height: 210px; }The issue arises from the height: 210px. If you remove the height attribute, the menu height will be much smaller.
Also, to avoid issues on responsive versions of your website, I would suggest changing the custom CSS to this:
@media screen and (min-width: 404px) { .site-branding { width: 350px; } }I hope this is what you needed and please let me know if you need anything else.
Take care,
Onur
-
Thank for your help Onur!
Yes, that takes care of the scrolling bar. But, it recreates the problems I was trying to solve earlier when i added the problematic CSS code. Could you tell me how to make the site name (Lemonglass Editing) fit on one line? And, how to make the description a bit bigger (because we’re writing …) ?
thanks again!
-
Hi @tnont, let’s take @ogurel’s code and make a couple of adjustments. What we will do is to set a max width and then also set a width of 100%. What that does is tell the browser, ‘hey, keep this element at 350px width, unless there isn’t room for that width and then you can make it narrower, but keep it as wide as possible.
@media screen and (min-width: 404px) { .site-branding { max-width: 350px; width: 100% } }See how that works for you.
-
Hi again,
I’m in Axon theme now! Yes, that works perfectly for the sizing.To make the description font-size a little bigger (for “because we’re writing in a digital world”), is it OK to add
.site-description {
font-size: 1.6rem;
}
?Or is there a better way to do it to maintain responsiveness?
Kate
p.s. The Boardwalk CSS you helped me with for this site didn’t work in the end because we were padding the content area and then when I looked at the page on a cellphone, the content had been squeezed into just one long vertical string of letters — not what we were going for:)
-
To follow up — note how the tail of the “g” in digital is being cut off even at the current tiny font size. Some setting (padding or box size?) needs to be tweaked a little.
-
Your code for the site description/tagline is just fine. Exactly how it should be done. The line height on the tagline is set pretty tight, which is causing the descender on the “g” to be cut off. Add the following to your .site-description CSS rule to take care of that.
line-height: 1.5;
On Boardwalk, we could have probably used a Media Query to control things and not end up with the narrow, squeezed content. With Media Queries, we can tell the browser to only apply things to certain widths (wider than 960px, or narrower, for example, and we can even tell the browser to apply it to a range (narrower than 960px, but wider than 480px).If you posted about the problem with the display on narrower screens, and I didn’t see that, I apologize.
-
Hi,
You didn’t miss a post — your help has been great. And I learned a lot from our work on Boardwalk. As I went along, I learned what I really need in a theme. So, until I go back to school and learn CSS:-), I’m sticking with a theme that I don’t need to tweak too much.My site’s looking good now. Many thanks,
Kate
-
Kate, your site is indeed looking great. You are welcome and do let us know if you have additional questions.
- The topic ‘fixed header bar in Axon theme’ is closed to new replies.
WordPress.com Forums 