Nav bar drop down menu pages

Hi,
I would like help aligning my drop down menu links under the services tab. Right now they are left positioned and look like that are for a different menu tab which is why I want to align them right. How can I do that?

Thanks in advance.

Hi @quituck,

To achieve that, you can add this in Theme Options > CSS

.desktop .sub-menu a {
    text-align: right;
}

Hope this helps

Another problem solved, quickly. Thanks so much.

You’re welcome! :slight_smile:

Hi,
I’m trying to center my navbar mobile icon. Any idea how I can do that?

Thanks in advance.

Hi There @quituck

Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

#x-btn-navbar {
    margin-right: 50%;
}

Thanks!

The following code worked for me.
.x-btn-navbar {
margin-top: 34px;
}
Thanks!

I would also like to know how to hard code the image alt text because my browser doesn’t recognize it in the page builder.

Also the global blocks are missing the responsive text feature. How do I write out this ass css so I can add the responsive class i.e.(h-responsive) to the heading text in the global block?

Hi @quituck,

In cornerstone you need to enter alt to the image element itself.


[quote=“quituck, post:7, topic:57078”]
Also the global blocks are missing the responsive text feature. How do I write out this ass css so I can add the responsive class i.e.(h-responsive) to the heading text in the global block?
[/quote]

You can add the responsive shortcode to the text element:

[responsive_text selector=".entry-title a" compression="1.5" min_size="22px" max_size="78px"]

For more information, please take a look at this:

Hope it helps :slight_smile:

That’s the thing. Google is telling me that my page is missing alt text. I know the image has alt text but Goolge doesn’t know that. Is there a way around that? Can I add it another way, such as in the style sheet because it’s not registering in Cornerstone.

Here is an image from my Goolge audit where it is not reading the alt text.

Also, I have another issue. My nav bar isn’t aligned properly on my portfolio page. See image. I used the follow code below and didn’t have much luck. I would like the increase the height of the navbar so all the text fits into into and so that it is aligned center with the logo. Because the bar is so short It overlaps with the content so I need to widen that space between the nav bar and the content.

.x-navbar .desktop .x-nav > li > a {
height: 90px;
padding-top: 50px;
padding-bottom: 50px;

}
.x-navbar-inner {
min-height: 200px !important;
}

.x-logobar {
border-bottom: medium none;
}

.x-navbar {
border-bottom: medium none;
}

.x-navbar .desktop .x-nav > li > a {
border-left: medium none;
}

.x-navbar .desktop .x-nav > li:last-child > a {
border-right: medium none;
}

I would also like to know if it is possible to change the nav bar text color for a specific page? I want the text to be white on my main pages and black on the portfolio, blog, and other index pages.

Hi @quituck,

I would like to check your website but it redirects me to this sub-domain: https://jcdconcretellc.comjcdconcretellc.com/

Could you please double check?

Thank you.

Sure. Its back up and running.

Hello @quituck,

The thread is in private now.

And by the way, your staging site is still down. Please double check it.

its working now

Hello @quituck,

Google is referring to the image in your slider. You will need to edit the slider and make sure to add an ALT text to any of the images in the layers or slides.

And your navbar is having issues because you added this custom css:

.masthead {
    position: absolute;
    width: 100%;
}

Please remove this code. If you want to have a fixed navbar, please go to X > Theme Options > Header > Navbar and set the Navbar Position to “Fixed Top”.

Hope this helps. Please let us know how it goes.

Okay but the alt text error is coming from the icon images on my home page. Google is telling me they are missing alt tags when they are not.

Hello @quituck,

Thanks for updating the thread.

I checked the website and can see that one of the image is not having ALT tag. Please add the alt tag and see how it goes.

Thanks.

Also, my navbar is transparent with the slider image behind it. It turns into the image on the right when I remove the absolute position. How can I keep this look and have a properly aligned nav bar?

I will try that, but Yoast still does not recognize my alt text???

Also I have an image in my creative CTA element and Google does not recognize the image either. See image How do i fix that error?

Hello @quituck,

You have set up your header incorrectly. Since only the home page has a slider, only the homepage header should also be fixed. Thus, updating your custom css into this:

.home .masthead {
    position: absolute;
    width: 100%;
}

And then you menu item colors must be set to black and only the homepage should be set to white. Go to X > Theme Options > Header > Link - Text and change the Navbar Links and Navbar Links Hover colors.

For the menu item in you homepage, you will need this custom css:

.home .x-navbar .desktop .x-nav > li > a, 
.home .x-navbar .desktop .sub-menu li > a, 
.home .x-navbar .mobile .x-nav li a {
    color: rgb(255,255,255);
}

.home .x-navbar .desktop .x-nav > li > a:hover, 
.home .x-navbar .desktop .sub-menu li > a:hover, 
.home .x-navbar .mobile .x-nav li a:hover {
    color: rgb(105,189,69);
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Please let us know how it goes.

All of my pages have the same menu effect from my before and after picture I attached. When I apply the code you provided above my home page menu stays the same which is great but the rest of my pages look like my after image. The light green and white nav bar you see on the right.

That is not what I want. How do I keep the same look of the navbar and make sure that it is aligned on my index pages?