Homepage Menu Bar

Hi there,
I am not a css coder at all :slight_smile: but would like to find out how to have the West theme menu bar as a full-width bar on the homepage. I see the sticky bar appears as I scroll, but I want the white bar to remain at the top always. I have attached an image of what I want it to look like

Thank you so much in advance!

Hello,

Can you please provide a link to your website?

Kind Regards, Roman.
aThemes Support

Hi There Roman,

Many thanks for your message, the website is currently under construction and due to confidentiality reasons for my client I can open it for you, I would just need to know exactly when you would be taking a look if ok?

Here is what the menu currently looks like:

Hello,

I would just need to know exactly when you would be taking a look if ok?

I can’t provide exact time, usually we answer within 24 hours (except weekends). If our free support isn’t enough, you can contact Codeable, or find a reputable freelancer on Upwork.

Kind Regards, Roman.
aThemes Support

Hi Roman,

Many thanks for your reply. I was in no way saying that the free support is not enough. I just have difficulty to leave the site open as there is a confidentiality issue for this person at this moment for people to see her site until its ready. I always appreciate your kind assistance

Hello,

I just have difficulty to leave the site open as there is a confidentiality issue for this person at this moment for people to see her site until its ready.

I understand that, that’s why I offered those options. With “not enough” I wanted to say that if you need immediate answers or someone to do it for you. Have a nice day :slight_smile:

Kind Regards, Roman.
aThemes Support

Hi Roman :slight_smile:
I completely understand :slight_smile: thank you so much.

Do you need the link to the site or can I show you what I am looking to do?

The Nav bar/menu bar currently looks like this and I want to create a menu bar that stretches all the way across like this ember theme on this link: https://www.nimbusthemes.com/preview/?theme=ember

I understand completely if you need the site open to look, then I will definitely do that.

Many thanks as always

Best,
Melissa

Hello Melissa,

Thank you for the detailed explanation, I’ll try to help you without a link. Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

#masthead {
    background-color: rgba(255, 255, 255, 0.6);
}

.header-scrolled a,
.header-scrolled .site-title a {
    color: #1c1c1c;
}

You can adjust background transparency by changing the 0.6 part from 0 to 1.

Kind Regards, Roman.
aThemes Support

Hi Roman,

You are an absolute legend! it worked so perfectly :slight_smile: Thank you so very much. The only one other thing I wanted to ask you, so that worked perfect for the homepage, for the rest of the actual pages on the site, we would like black nav bars, because as you can see below on an actual page the transparent nav bar wont work. Is there any chance at all I can get the pages menu nav bar different? :frowning: sorry I know this is complex. I have put a picture below of what the page looks like right now, You can see the menu is “hidden” due to the transparency bar from the homepage. Thank you again so grateful for your help

Hello Melissa,

Please try to use this CSS code instead of previous:

#masthead {
    background-color: rgba(255, 255, 255, 0.8);
    transition-duration: 0.5s;
}

.site-title a,
.site-description,
.main-navigation a {
    color: #1c1c1c;
}

Kind Regards, Roman.
aThemes Support

Hi Roman,

This worked like a charm :slight_smile: thank you so much. One last last question I promise :slight_smile: On the pages (apart from the homepage) is there a way to make the pages only a darker color? Sorry for the complex questions and thanks so much for all your help

Best,

Melissa

Hello Melissa,

I’m not sure what exactly should be darker, can you please specify it more precisely?

Kind Regards, Roman.
aThemes Support

Hi Roman,

I trust that you are well and my apologies for only responding now.

I managed to sort out the previous problem I had, many thanks for your help. One last thing I do need your help with, since the coding you gave me (which worked perfectly by the way) the logo appears a lot smaller and I would like to make it look much bigger, is that possible? I would like to have it fit the menu bar if possible.

This is what it currently looks like:

Many thanks as always,

Best
Melissa

Hello Melissa, try to add this CSS code as well:

img.site-logo {
    max-height: 100px;
}

Kind Regards, Roman.
aThemes Support

Many thanks Roman that worked :slight_smile:

Great! You are welcome Melissa :slight_smile:

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.
aThemes Support

Hi Roman,

I hope you are doing well :slight_smile:
I know we spoke about this awhile ago regarding this topic, and wanted to ask you for more help. We want the logo on this site to be bigger, bigger in terms of we want someone to be able to read the slogan that says" Your Virtual Assistance". I cannot seem to get the logo bigger no matter what I do (I also do not want to increase the menu bar size). Is there any way of me making the logo bigger somehow? I have tried to increase image of logo size myself in terms of the actual PNG, but it does not seem to matter what I do and it still stays the same :frowning:

The URL to our site is: http://www.reach-yourvirtualassistance.com/

Many thanks as always

Best,
mel

Hello Melissa,

Try to use this CSS code:

.site-header.has-header:not(.header-scrolled) .site-logo {
    max-height: 200px;
}

…instead of this:

.site-header.has-header:not(.header-scrolled) .site-logo {
    max-height: 100px;
}

And crop the logo image to remove top/bottom space.

Kind Regards, Roman.
aThemes Support

Hi Roman,

Many thanks for this, I have replaced the coding which I see has increased the logo but also the menu size :frowning: sorry to ask but how do I crop the logo to remove top/bottom space?

Best,

Melissa

Hello Melissa,

You can try to crop it right in your Media Library:

Kind Regards, Roman.
aThemes Support