Help with Top Nav Bar

Support
#1

Hello!

I’m wondering if you could help me make a few edits to the top nav bar?

  1. I would like to make the background my brand color (#a82e2e) and the text white.
  2. I would like to have the text centered (rather than off to the left).

Would it be possible to make these edits?

For reference, my website is https://crisisequipped.com

Thanks so much!

  • Nadia
#2

Hi Nadia,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. To make the text centered and changing the background color try adding the following code in the Theme Options > CSS:

.x-topbar-inner {
    display: flex;
    justify-content: center;
}
.x-topbar {
    background-color: #a82e2e;
}
.x-topbar .p-info {
    color: #fff;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

Thank you! It worked- this is what it looks like:

Just a couple more questions.

  1. How do I make the text white, and the text on hover white also?
  2. The “Free shipping” text is a link. Is it possible to remove the line that shows up under the text?
  3. Can we make the Top Nav Bar a little thinner?

Thanks for your time and help!
Nadia

#4

Hello Nadia,

1.) To make the text white, please use this custom css:

.x-topbar .p-info,
.x-topbar .p-info a,
.x-topbar .p-info a:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: none;
}

2.) The code above already takes care of that.

3.) Update your code and use this:

.x-topbar {
    background-color: #a82e2e;
    height: auto !important;
}

We would love to know if this has worked for you. Thank you.

#5

Thank you so much!!

The first code worked perfectly!!

The second one didn’t seem to have changed the height. The code you provided says “height: auto”. Is the height in pixels or em’s? What would you suggest I change it to so that it looks thinner?

Thanks for all your help!! I appreciate it so much!!

#6

Hi Nadia,

Please update the code to:

.x-topbar {
    background-color: #a82e2e;
    height: auto !important;
    min-height: 1px;
}

Hope this helps.

#7

Hi!

That almost worked! Now it looks like this:

How can I center the text within the line?
Thanks!

#8

Hi Nadia,

I checked your website and the text is vertically centered:

Thank you.

#9

Hello! Yes, that’s is because I didn’t save the code. It’s showing up centered on the page, but the last code cuts the bottom section of the top nav bar instead of making it thinner and centering the text (across the height of the bar). I hope that makes sense. :slight_smile:

Also, I noticed that on mobile, it looks like this:

I tested it on several mobile devices and it looks the same on all mobile devices.
Could you show me how to change it so that it looks just like it does on the desktop and tablet versions?
Thanks so much!

#10

Hi Nadia,

To resolve both issue, please add this to Theme Options > CSS

/*remove the topbar's white background on mobile*/
.x-topbar .p-info {
	background-color: transparent !important;
}

/*zero out the topbars height*/
.x-topbar {min-height: 1px !important;}
.x-topbar .p-info {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	line-height: 1.3;
}

Now, if you think the topbar became too thin and want room for the text to breath, please adjust the line-height: 1.3; value.

I see that you have a minifier/caching plugin, please make sure to clear that after adding this codes.

Cheers!

#11

That worked perfectly! I can’t thank you enough!!! You guys are awesome! :slight_smile:

#12

You’re more than welcome, glad we could help.

Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.