Nav bar drop down menu pages

Support
#21

Hi @quituck,

In that case, please remove all .home selector from the provbided CSS. It should be applied to all pages.

Thanks!

#22

Now, let me explain my problem again, because I don’t think you guys understand because your responses are not helping me to resolve my issues with your theme.

I set up my site using the “app” template, and it came with the following masthead code:

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

}

Since my site is using your app template, my navbar is a bit customized, so it’s transparent, and I like that.

What I don’t like is how my portfolio, archive, and blog pages navbar look. Because the nav bar is transparent, I can’t see my text and the alignment is off.

Here are my problems with the navbar on the my portfolio pages:

  1. I can’t see my links, because the font color is white. (Can I change the color on the links on these pages specifically? Or can I change the navbar background color on these pages specifically, without changing the navbar on the entire site?)

  2. The links and the logo fall below the navbar container on my index pages, which causes an overlap in content. See my gallery > portfolio page as an example.

This is a seriously issue that I would like to resolve quickly so I can wrap this project up.
The code you gave me took me back to where I started. Meaning my issue is only with the navbar display on my index pages. The rest of the pages are fine.

I told you this earlier in my message, and you told me it was related to the slider on my home page, but that was not the problem.

Thank you so much for your understanding, and for your prompt response. I really love your themes, and usually can clear up these kinds of code conflicts with your superb customer support.

#23

Hi @quituck,

Thank you for the detailed explanation.

To fix this, kindly follow the instruction below.

  1. Remove these css codes in Theme Options > CSS 
.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .sub-menu li > a, 
.x-navbar .mobile .x-nav li a {
    color: rgb(255,255,255);
}

.masthead {
     position: absolute;
     width: 100%;
}
  1. Set your navbar links to black or to any color that is visible on white background under Theme Options > Header > LINKS – TEXT

  1. Add this code to Cornerstone > CSS for the pages where you want your navbar to overlap like your homepage
.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .sub-menu li > a, 
.x-navbar .mobile .x-nav li a {
    color: rgb(255,255,255);
}

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

Hope this helps

#24

This responses aren’t very helpful because you are telling me things I already know.

I would rather not have to have put code on each style sheet per page because it will slow down my site loading speed when I start optimizing this site. I prefer to use ONLY ONE style sheet. I DON’T WANT MULTIPLE STYLE SHEETS!

Please Address The Following Problems related to my navbar on index pages:

It would make more sense to add code to the main style sheet to fix my portfolio and archive pages and instead of changing code on every page.

  1. Can I get the correct css to just fix the portfolio, archive, blog index pages so I can paste in into my main style sheet?

Also, I’m familiar with how to change the link color using the customizer.

  1. I was wondering how to change the link colors on those type of page(s) only using css ? I would like to change the nav links on my portfolio index pages, blog post pages, and archive pages. to black with a green hover color.

I would also like to change the link color to the same colors on mobile as well.

2a) I would like to know how to change the background color on those index pages only.

2b) I would like to remove my topbar from those pages since it doesn’t look good on them because it’s transparency.

#25

Hi @quituck,

First of all, our apologies for the back and forth and thank you for bringing this up to our attention. I have checked further the app demo and there is indeed a section on the demo that was overlooked specifically the category archive page but other than that, the other pages should be fine it’s just that there are incorrect things you set in the CSS.

Single Posts

The code you have added in the custom CSS that is why the background color is not showing up correctly so kindly fine this block of code:

.single-post .masthead {
    position: relative;
    width: auto;
    background-color: ##69BD45;
}

to

.single-post .masthead {
    position: relative;
    width: auto;
    background-color: #69BD45;
}

Notice that the current code’s background-color value is ##69BD45 instead of #69BD45.

Category Archive and Portfolio Items

I have already reported this to the development team so that they can address it. For the meantime, to solve this issue, Please update the code I previously suggested to:

.category.archive .masthead,
.single-x-portfolio .masthead,
.single-post .masthead {
    position: relative;
    width: auto;
    background-color: #69BD45;
}

Hope this helps.

#26

Hi,
Thank you so much for the prompt response.

We’re getting closer to resolving this issue.

How do I change the topbar background color on these specific pages to a sold green color?

Also have to I apply the following code my portfolio, blog posts, and archive pages so I can change the nav link color on those pages only?

.x-navbar .desktop .x-nav > li > a,
.x-navbar .desktop .sub-menu li > a,
.x-navbar .mobile .x-nav li a {
color: #000;
}

#27

Hello @quituck,

Thanks for updating the thread. :slight_smile:

TO change the background color on the pages you have mentioned, please use following CSS under X > Theme Options > CSS:

.page-template-template-layout-portfolio .x-navbar, .single-x-portfolio .x-navbar, .blog .x-navbar, .single-post .x-navbar, .archive .x-navbar{background-color: #ddd !important;}

To change the color, please add following CSS under X > Theme Options > CSS:

.page-template-template-layout-portfolio .x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu li > a, .x-navbar .mobile .x-nav li a, .single-x-portfolio .x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu li > a, .x-navbar .mobile .x-nav li a, .blog .x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu li > a, .x-navbar .mobile .x-nav li a, .single-post .x-navbar, .archive .x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu li > a, .x-navbar .mobile .x-nav li a{color: #fff; }

Thanks.

#28

So, the second line of code allowed me to change the link colors on mobile. Lastly, I want to change the links on my index pages listed above. The first link of code didn’t work. How can I change the link colors to black with a green hover color on my blog, portfolio, and archive pages?

#29

Hi @quituck,

I think it’s best to discuss issue per thread at a time, I myself is a bit confused what’s needed to be done. And so we could easily track the remaining issues.

What confused me as an example, it’s said all pages have the same menu effect from before and after, and when you applied the code the home page menu stays the same and that’s correct, BUT, the rest of the pages are still the same as the second screenshot. Which means the CSS works only on the home page and not on other pages, hence, to correct it, we should also make the CSS works on all other pages by removing .home. Plus, you initially didn’t provide the specific information of which pages so we just assume you’re only referring to the home page, hence the CSS has .home as initially provided.

I can only investigate and provide a recommendation based on the initially provided information. What I understand was just a transparent background and the text aren’t readable and it is based on this thread’s discussion minus the already solved issues.

Now, I assume you’re still referring to those index pages where Jade already provided. Then the CSS should be this

.page-template-template-layout-portfolio .x-navbar .x-nav > li > a,
.archive .x-navbar .x-nav > li > a,
.blog .x-navbar .x-nav > li > a  {
color: #fff !important;
}
.page-template-template-layout-portfolio .x-navbar .x-nav > li > a:hover,
.page-template-template-layout-portfolio .x-navbar .x-nav > li > a:hover span,
.archive .x-navbar .x-nav > li > a:hover,
.archive .x-navbar .x-nav > li > a:hover span,
.blog .x-navbar .x-nav > li > a :hover,
.blog .x-navbar .x-nav > li > a :hover span {
color: green !important;
}

Again, it’s for index pages so single post and single portfolio aren’t included. Please start a new thread for new issues and questions :slight_smile:

Thanks!

#30

That didn’t work.

#31

Hello @quituck,

The App demo, http://demo.theme.co/app/, uses a custom css code which changed the position of the masthead and the colors of the menu items. Please take note that those css code were intended for the major pages only. In the same category archive, http://demo.theme.co/app/category/uncategorized/, you will still have the same problem.

To fix your issue including the single post and single portfolio posts, please update the css code and use this:

.page-template-template-layout-portfolio .x-navbar .x-nav > li > a,
.archive .x-navbar .x-nav > li > a,
.blog .x-navbar .x-nav > li > a,
.single-post .x-navbar .x-nav > li > a,
.single-x-poortfolio .x-navbar .x-nav > li > a{
    color: black !important;
}

.page-template-template-layout-portfolio .x-navbar .x-nav > li > a:hover,
.page-template-template-layout-portfolio .x-navbar .x-nav > li > a:hover span,
.archive .x-navbar .x-nav > li > a:hover,
.archive .x-navbar .x-nav > li > a:hover span,
.blog .x-navbar .x-nav > li > a :hover,
.blog .x-navbar .x-nav > li > a :hover span,
.single-post .x-navbar .x-nav > li > a :hover,
.single-post .x-navbar .x-nav > li > a :hover span,
.single-x-portfolio .x-navbar .x-nav > li > a :hover,
.single-x-portfolio .x-navbar .x-nav > li > a :hover span {
  color: green !important;
}

.page-template-template-layout-portfolio .x-navbar .desktop .x-nav > li > a:hover > span, 
.page-template-template-layout-portfolio .x-navbar .desktop .x-nav > li.x-active > a > span, 
.page-template-template-layout-portfolio .x-navbar .desktop .x-nav > li.current-menu-item > a > span,
.archive .x-navbar .desktop .x-nav > li > a:hover > span, 
.archive .x-navbar .desktop .x-nav > li.x-active > a > span, 
.archive .x-navbar .desktop .x-nav > li.current-menu-item > a > span,
.blog .x-navbar .desktop .x-nav > li > a:hover > span, 
.blog .x-navbar .desktop .x-nav > li.x-active > a > span, 
.blog .x-navbar .desktop .x-nav > li.current-menu-item > a > span,
.single-post .x-navbar .desktop .x-nav > li > a:hover > span, 
.single-post .x-navbar .desktop .x-nav > li.x-active > a > span, 
.single-post .x-navbar .desktop .x-nav > li.current-menu-item > a > span,
.single-x-portfolio .x-navbar .desktop .x-nav > li > a:hover > span, 
.single-x-portfolio .x-navbar .desktop .x-nav > li.x-active > a > span, 
.single-x-portfolio .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: 0 2px 0 0 rgb(105,189,69);
}

We would loved to know if this has work for you. Thank you.

#32

I figured it out. Your code worked perfectly. I have to remove the following code for the above css to work.

@media (max-width: 979px) {
.masthead {
position: relative;
width: auto;
background-color: #fff;
}

The code I pasted above came with the App theme. I’m not sure what it’s purpose was or if it had a purpose because I deleted it. I’m all set for now. I will start a new thread for my remaining questions.

Thank you so much for all of your help. I really appreciate it. You guys are the best!

#33

Glad it’s working now, and you’re most welcome!

#34

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