Docs

[neonnato]

I would like to style my home page navigation bar – the Customizer allows me to set the navbar height, but doesn’t offer any more home page navbar styling options.
This is what I need to achieve:
1. I am happy for the menu to be centered, but I want the menu to be positioned / start further to the left so that all my nav elements fit on one line.
2. I do not want the menu to wrap at any desktop size or screen width, and it needs to maintain an even height.
3. I only want to change the style of and target the home page navigation.

… I am comfortable with css, but am new to cornerstone and x-theme, so I need some assistance.

the site url is… http://www.ourearth.online

Many Thanks, David

[Christopher]

Hi there,

#1 Please update this code:

.page-id-895 .masthead-inline .desktop .x-nav {
    float:none;
    margin: 0 auto;
    width: 50%;
}

To :

.page-id-895 .masthead-inline .desktop .x-nav {
   display: table;
    margin: 0 auto;
}

#2 Find this code and remove it :

@media only screen and (max-width: 1199px) and (min-width: 980px){
.page-id-895 .masthead-inline .desktop .x-nav {
    width: 55%!important;
}
}

I see you added each CSS multiple times, please remove duplicated code.

#3 You used the right selector to target home page.

Hope it helps.

[neonnato]

Hi Christopher,
Many thanks for your prompt reply.

I have ‘inherited’ this project in the last day or so, and am dealing with a tight deadline… 🙂

At the moment, I only have access to the files through the wordpress backend (I am hoping to get host details today).

When I’m in the wordpress backend, I go to Appearance/ Customise, I click on Custom, which takes me to the only css file I can see… I have made the changes you suggest (and commented out the original version of the code), I close the file by clicking the x, I click the ‘ save & publish’ button, and then return to the site. Nothing has changed… when I do an ‘Inspect Element’ on the navbar, I see that the styles I have commented out are still active.
What am I missing here?

What do you mean by ‘I see you added each CSS multiple times, please remove duplicated code’? I am only seeing one ‘global CSS’. I think perhaps this sentence of yours is the key to the issue I am experiencing.

Many Thanks, David

[neonnato]

Ok,… so I have gone into the wordpress backend, appearance > editor, and I can see a ‘mini’ CSS there, perhaps from the previous developer. This is also the file that I get when I open style.css on the host… So where does the ‘global CSS’ reside? – I don’t see the file in the editor panel… Cheers, David

[Paul R]

Hi David,

Please check in WP Dashboard > Appearance > Customize > Custom > Edit Global CSS

Thanks

[neonnato]

Hi Paul,
Thanks for your reply – I think perhaps this is in reply to my last post and not my last two together (the last one was just a footnote to the previous one). Yes, I have located the ‘edit global css’ tab. I will actually repaste the crux of that first question here, as this will clarify what I am having difficulty with. I wrote:

“When I’m in the wordpress backend, I go to Appearance/ Customise, I click on Custom, which takes me to the only css file I can see… I have made the changes you suggest (and commented out the original version of the code), I close the file by clicking the x, I click the ‘ save & publish’ button, and then return to the site. Nothing has changed… when I do an ‘Inspect Element’ on the navbar, I see that the styles I have commented out are still active.
What am I missing here?

What do you mean by ‘I see you added each CSS multiple times, please remove duplicated code’? I am only seeing one ‘global CSS’. I think perhaps this sentence of yours is the key to the issue I am experiencing.”
Footnote to this: I can also see style.css in appearance > editor…

I am trying to understand the relation of the two files, and Paul’s insightful and, I think, useful comment re multiple load of css files.
What happens if I delete the ‘mini’ style.css that has been placed in there? What is the original CSS setup with the theme out of the box? I apologise for any confusion, I have inherited somebody else’s work and am not able to contact them about what they have put in place.
Any clarification and insight you can offer would be greatly appreciated,

Thanks, David

[neonnato]

Footnote: when I wrote Paul in the message above, I was actually referring to Christopher’s reply – apologies…

[Paul R]

Hi David,

Can you provide us your wordpress admin login in private reply so we can take a closer look.

Thanks

[neonnato]

This reply has been marked as private.

[neonnato]

it looks like the css is being pulled from public_html/ourearth.online/wp-content/themes/x/framework/css/dist/site/stacks/renew.css

why is this and can we change it to the global.css

?????

[neonnato]

can you guys help?

[Christopher]

Hi there,

Upon checking your site, I noticed you added identical code in both in cornerstone/css and customizer/css which is wrong, that’s what I was referring to as duplicated code.
See the attachments.

Please check CSS and remove duplicated code from customizer or cornerstone.

Hope it helps.

[neonnato]

So which one is the master or parent code customiser or cornerstone?

[neonnato]

Which one do I delete. And can you give me the place to do the edit please

[Lely]

Hello There,

We can access Customizer CSS on Appearance > Customize > Custom > Edit Global CSS. CSS added on this part will reflect and work on every page of your site as long as the structure is available.

On the other hand, Cornerstone CSS is on Cornerstone Editor > Settings Tab > Custom > CSS. CSS added here is available and will work for this page only. So depending on your intention for the CSS please remove the other instance.

Hope this helps.

[Author]

Posts