Two semi transparent bars

[Teeebest]

Hi,
I want to achieve the kind of navbar used on this website: https://www.studio-creations.co.uk

I was able to make my bar transparent and absolute on the slider. I know I can not have two absolute bars, so how can i create the top bar as used on the reference website pls?

Thank you.

[prakash_s]

Hi @Teeebest,

Thanks for writing to us.

I also see you’re using Pro. You can create a custom header and then set the bar’s Initial Position to Absolute and set its Background to Transparent. The content will be pushed up behind your header.

Then go to settings -> slider settings below masthead -> choose a slider from here.

Hope it helps.
Thanks

[Teeebest]

Hi,
Thanks for the swift response. you did not understand my enquiry. See the picture attached. I want to have a transparent top bar above the main navbar at that same position,

navbar.png

[prakash_s]

Hi @Teeebest,

First of all, add two containers at a bar.
Then add the logo in first container.
Then add navigation elements in the second container.
Now edit the second container -> Go to Flex box -> Child Placement -> Choose Column from here.

Hope it helps.
Thanks

[Teeebest]

Thanks. there are two issues you did not address:

1. How to make the top navbar(email and phone number) appear at the top right corner.
2. I need it(container 1) to disappear when scrolling. only container 2(navbar and logo) will be fixed when scrolling.

Thanks as always.

[prakash_s]

Hi @Teeebest,

I need it(container 1) to disappear when scrolling. only container 2(navbar and logo) will be fixed when scrolling.

To add a new Bar in the Header Builder. Go to Pro–>Header -->Select your Header and click on Edit —>Click on Add Bar
Now add the elements that you want to display in the Header Bar.

Now click on the click on the Magnifier icon to Inspect the Bar 2.
After that set Sticky Bar on of the Header
Now Set the Bar Hide Initially

Please have a look at the given screenshot below.

How to make the top navbar(email and phone number) appear at the top right corner.
I checked both the staging and the live site. The top bar not added to both sites. Kindly add the top bar. As we need to know which element you are using to show the phone number and email. In order to help you with your concern, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[Teeebest]

Secure note with login details sent.
Thanks

[ruenel]

Hello @Teeebest,

Your site in the secure note cannot be accessed.

Please double-check it. And if you are working locally, it is best that you create your staging area hosted on the web so that we can check the staging site.

Thanks.

[Teeebest]

Kindly check this:
https://ics.cloudaccess.host

Thanks

[christian]

Hey @Teeebest,

Your password is incorrect.

The solution to your problem though is the Margin Top setting of the Absolute Bar. Set it the same as your top bar height. Please watch the video demo below.

2020 11 29 17h35 47

Hope that helps.

[ruenel]

Hello @Teeebest,

You want something like this?

Please do the following:
1.) In your 2nd bar, 2nd container, set the Flexbox child placement to “column” and set the horizontal alignment to “End”

2.) Insert a text element at the top of the container and tweak the text element settings.

Hope this makes sense.

[Teeebest]

Please see what I have achieved so far: https://drive.google.com/file/d/1RgqOv9nTZ23pnqcPXVpvVGzc0wvdbGrB/view?usp=sharing

I want to make the logo to be a bit bigger and overlay on both bars.

Thanks

[marc_a]

Hi @Teeebest,

Do you have a mockup design for your headers? so that we could help you with your concerns. On the other hand, to make your logo a little bit bigger and overlay on both bars. You can add the CSS code below in your logo element, just go to customize.

Then add this CSS code:

$el img {
  position: absolute;
  top: -40px;
  width: 100px;
}

Just change the width value to your desire logo width and top for your logo overlay between the two bars.

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme. (edited)

Hope that helps.

Thank you.

[Teeebest]

Hi, I do not understand what you meant by mockup designs of my header but I want to imitate the exact header in this website: https://www.studio-creations.co.uk/
Take note of the effect when scrolling, the logo size reduces.

[tristup]

Hi @Teeebest,

You can achieve that by creating two different header bars. Please follow the below steps.

1. Set Off the Sticky Bar for the two header bar with the bigger logo.
2. Create the same Header bar with Sticky Bar On, and the smaller logo.
3. Set Hidden initially, so it will appear only when you scroll.
4. Set Shrink Amount to 1.

As suggested by my colleague, I would also suggest you hire a developer who can assist you to do the further customization or you can avail of our newly launched service called One, where the customization questions are answered.

Hope it helps.
Thanks