Header not quite responsive

  • jeepwhisperer

    (@jeepwhisperer)


    10 months, 3 weeks ago

    First, I’m not sure this is the right place for my question, so if not, please point me in the right direction. I’m new to wordpress so my questions are likely going to be “newbe” problems… but here we go:

    I have a new installation on Bluehost, and I’m using Elementor (unless talked into something else). Following several videos I’m using the Astra theme. For the most part things seem to work OKish, but there are a couple simple (I think…) problems that I need help with, both involving the header viewed on smaller screens. 1. The logo in the upper left does not scale up in a responsive way, i.e. on a cell screen it is so small it’s barely viewable. 2. Also on smaller screens, the Donate button in the upper right disappears. Also, when trying to edit the header I get a message that the page uses the “transparent header”… don’t know what that is or if it matters.

    That’s mainly what I need right now, but the larger picture is that I’m looking for a place I can ask stupid newbe questions while I’m getting used to this new environment. To the degree possible I’d like to avoid the “trial and error” learning curve. Thanks! Joe

    • This topic was modified 10 months, 3 weeks ago by jeepwhisperer. Reason: made mistake

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator threadi

    (@threadi)

    10 months, 3 weeks ago

    Since you are designing the header with Astra, I would recommend contacting their support forum: https://wordpress.org/support/theme/astra/

    BluehostSupport

    (@bluehostsupport)

    10 months, 2 weeks ago

    Hey Joe, welcome to WordPress and thanks for laying out your setup so clearly. This is exactly the kind of question that fits here, and you’re definitely not alone in running into header quirks early on.

    It sounds like the logo is showing up too small on mobile. In the Astra theme settings, there’s a separate section just for how the logo appears on mobile. Try going to Appearance > Customize, then Header > Site Identity. Look for the mobile logo settings and increase the max width value to make it more visible. You can also upload a separate logo just for mobile if needed.

    If the Donate button disappears on smaller screens, it’s probably being hidden in the responsive settings or getting pushed out due to spacing. Open the header builder under Customize > Header Builder, click on the button element, and check the visibility settings for mobile. Make sure it’s turned on and adjust spacing or alignment as needed so it fits within the mobile layout.

    The part of the message about the transparent header just means that the header is layered over the top section of your page, normally for stylistic reasons. If that’s creating layout issues, you can turn it off by editing the page in Elementor. Get there by scrolling down in the settings panel and disabling the transparent header option under the Astra Settings or the Page Settings.

    As @threadi pointed out, since you’re working directly with the Astra header builder, it’s  also recommend checking out their support forum here: https://wordpress.org/support/theme/astra/. The team there can help with anything more theme-specific.

    Thread Starter jeepwhisperer

    (@jeepwhisperer)

    10 months, 2 weeks ago

    Thank you for getting back to me! I’m looking around in the Astra settings and I don’t see anything specific for the mobile setting for the site logo, but I’m not using Astra Pro yet, so maybe that’s why?

    Since I seem to be in the right place, let me ask a more general question that I have yet to find a good answer to. In this development environment there are three levels of interface… i.e. there is a dashboard for Word Press, a dashboard for the theme, Astra, and a third for Elementor, the development environment that has been recommended as preferred. The last two have free and paid versions. I don’t really understand the “theme” level and why it’s so important… and if it is indeed a good idea to choose Astra for basically everything I’m going to do and go with it. I’m not quite understanding when (or if I should…) make changes on the Word Press or Astra dashboard, and when to stick with the Elementor environment, where I expected to live. It seems that it’s not that simple…

    First, am I on the right track with this setup, and is there a source to learn more about how to use it (or is this forum the best place) and if it is, do I need to go ahead and pop for the Pro versions of Astra and Elementor before I can really get anywhere?

    Again, thank you for whatever advice you can give. Even though this project is “hobbyish” i.e. I have a day job, it’s pretty important that I get a decent webside that shows a logo and a working “Donate” button going soon… really soon, like tomorrow… More will be needed later, but this basic part I need right away.

    Moderator threadi

    (@threadi)

    10 months, 2 weeks ago

    Themes are used to display your website in the frontend. They provide basic features that every website should have. A header, a footer, a content area, menus, etc. Most menus come with predefined configurations, which is what makes them different from each other. There are themes that come with a rigid default for 2- or 3-column content output, and there are themes that give you complete freedom or come with a variety of different templates for a wide range of content. Basically, however, you can also customize any theme. Things that are not available as options, but you still want to do. Developers usually do this by using so-called child themes in which you can customize styles and templates.

    Elementor is a page builder that allows you to customize the templates that a theme offers. It gives you the ability to make customizations without a developer, using a graphical interface that offers a wealth of options. Elementor is just one of many page builders in the WordPress world. Nowadays, WordPress itself offers something similar with the block editor.

    First, am I on the right track with this setup?

    No one can tell you that. It depends very much on what you want to do, what your skills are, and how you feel about your chosen project constellation. One of the wonderful things about WordPress is the variety of possibilities it offers, but this can also be overwhelming and confusing at times.

    Take a look at some introductory videos on WordPress: https://learn.wordpress.org/learning-pathway/user/

    Unfortunately, I don’t know which guide you are referring to that led you to choose Astra + Elementor. There are many different guides on how to do things. But I have seen this constellation many times before, as have many others.

    I’m not quite understanding when (or if I should…) make changes on the WordPress or Astra dashboard, and when to stick with the Elementor environment, where I expected to live.

    In theory, Astra would be responsible for the layout of the website. However, since you also use Elementor, Elementor is as well. You have to decide for yourself which way is most practical for you. The best way to learn is to simply try it out.

    Thread Starter jeepwhisperer

    (@jeepwhisperer)

    10 months, 2 weeks ago

    I think I need to take a step back and go through the lessons, as well as stepping back from Elementor and Astra so I can explore and understand WordPress and themes by themselves.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Header not quite responsive’ is closed to new replies.