Remove Header Bar or Move Text to Center

thesadshow
(@thesadshow)

1 year, 10 months ago

I am using your Lodestar theme as a simple “business card” type of website for my business, and it’s exactly what I need. But the black header bar that displays a menu on the left and custom text on the right is an issue for me.

If I am going to use to black header bar at all, I only want to display my phone number because I have no other pages to list in the menu and skipping to certain parts on the page is not working accurately for some reason. I want to display the phone number in the center because it looks funny otherwise when only the phone number is there. However, I have tried deleting the left-side menu and some other things and can’t get the phone number in the custom text field to be centered.

If this is not possible, I would like to remove the black header bar altogether. I have also tried this in the theme editor but couldn’t figure out how to remove it.

Your help is greatly appreciated. Thank you.

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

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

Sophie – a11n
(@sophiegy)

1 year, 9 months ago
Hi! Just to check, were you intending to show the top left menu, or not at all?

We may be able to make a suggestion for CSS depending on what you’re wanting to do; feel free to remove the menu if you’re not using it at all and we can check for the correct CSS to use.

As it is, your page jumps do appear to be working correctly! If you’re wanting to keep those page jumps and still center the telephone number, perhaps this could work:
```
 @media screen and (min-width: 60em) {
.has-top-content .site-top-content, .has-top-content .main-navigation + .site-top-content, .has-top-content .main-navigation {
  width: 45%;
  text-align: left;
}
}
```
Thread Starter thesadshow
(@thesadshow)

1 year, 7 months ago

Thank you for the reply. It got lost in my inbox and I didn’t see it until now.

It appears that the best solution to my problem is to disable the sticky header menu so my page jumps show the title of the targeted section, which is now being covered by the sticky header.

How do I stop the header menu from being sticky?
Adam Leone
(@aleone89)

1 year, 7 months ago
Hey there,

It’s not possible to stop it, but it’s possible to hide it and this CSS should do the trick:
```
 .site-header-fixed.header-top, .admin-bar.lodestar-front-page:not(.lodestar-customizer) .site-header-fixed.header-top {
    top: -112px;
}
```
Thread Starter thesadshow
(@thesadshow)

1 year, 7 months ago

Thank you, this was helpful.

How do I remove the header menu completely? Or hide it, if removing it can’t be done?

Thread Starter thesadshow
(@thesadshow)

1 year, 7 months ago

Also, how do I remove the black overlay on the header/front page image?

I understand that this is so you can put text over the image, but I need to get rid of the black overlay to show the original image and I don’t see an option for that.

Thanks for your time.
Adam Leone
(@aleone89)

1 year, 7 months ago
Hey there,

How do I remove the header menu completely? Or hide it, if removing it can’t be done?

That CSS should hide the menu – the -112px, will pull this out of view.

Also, how do I remove the black overlay on the header/front page image?

You should be able to change this using this CSS here:
```
body:not(.no-header-image) .custom-header-image::before, .lodestar-front-page .custom-header-image::before {
    background: rgb(255 255 255 / 0%);
}
```
Many thanks in advance!

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

The topic ‘Remove Header Bar or Move Text to Center’ is closed to new replies.