[SummitParticipant]

Hello,

I am using Integrity Dark Child Theme version 4.1.0

My website is http://summitchurch.co

I would like the navbar to be transparent only when looking on larger screens such as a computer. When screens get resized really small on a computer or when you are looking on a mobile device the responsive design forces the navbar into a dropdown menu icon. When this happens I want the navbar to automatically become solid again.

I have been able to make the navbar transparent using custom CSS but this stays applied on smaller screens and mobile devices.

Here is a similar website that is doing exactly what I am trying to do:
http://springs.church

Thanks

[Paul RModerator]

Hi,

Thanks for writing in!

To achieve that, you can add this under Custom > CSS in the Customizer.

@media (min-width: 979px) {
.x-navbar {
    background-color:transparent;
}
}

Hope that helps.

[SummitParticipant]

That worked great thanks so much!

I have two more tweaks that would finish off this bad boy!

1) How can I remove the site link colors, (The little bars above the links in the navbar) or at least make them transparent?

2) In the navbar; how can I get the logo all the way to the left of the screen, and the menu items all the way to the right of the screen?

Both of these questions can be seen in this same example http://springs.church

Thank You!

[Nabeel AModerator]

Hi again,

1. To remove the hover bar you can use this code:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none !important;
}

2. To align the logo to the left and navigation bar to the right, add this code in your Customizer:

.x-navbar .x-container.max.width {
    max-width: 1400px !important;
    width: 99% !important;
}

Let us know how this goes!

[SummitParticipant]

Hey that worked perfect thank you! I’m sorry it has taken so long to get back to you guys.

I am using CSS to push the content up underneath the transparent navbar. We were able to make it so that when the screen gets small enough the navbar automatically becomes solid again. When this happens the content is still pushed up underneath the navbar effectively chopping off some of the content. Is there a way to have the content automatically be pushed back down when viewing on the smaller screens?

Thanks again!

[ZeshanMember]

Hi there,

Thanks for updating the thread!

You can avoid that on mobiles using following CSS code under Custom > CSS in the Customizer:

@media only screen and (max-width: 978px) {
    .masthead {
        position: relative;
    }
}

Thank you!

[SummitParticipant]

You guys are the best! Since your so good at helping, I will ask another question!

Notice how the sticky navbar behaves on the same “reference” website I mentioned before. http://springs.church

I would like my navbar to behave the same way. Currently I am just using a generic “sticky header” plugin. It works but it does not match the exact spacing and alignment of my navbar menu items and logo.

Can I achieve the same functionality of the reference I gave you using CSS in X-Theme?

Thanks!

[ChristopherModerator]

Hi there,

Please find and remove position: absolute; from this code :

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

Remove this code as well :

.x-navbar .x-container.max.width {
    max-width: 2500px !important;
    width: 99% !important;
}

Add this code:

@media (max-width:979px){
.x-navbar .x-brand {
    margin-top: 0;
}
.x-btn-navbar {
    margin-top: 8px;
}

}

Hope it helps.

[SummitParticipant]

Hello there,

I have a problem I was hoping I could get some direction on. I am running into an issue that keeps me from deleting certain things within cornerstone. From the forum I have found out that this is a known issue and can be fixed by updating the X-theme.

My x-theme version is 4.1.0
I am currently active on the X Child Theme: Integrity Dark Version 1.0.0

I do not know how to backup up my site, update my X Theme and Child Theme and restore everything back the way it was.

I know this a big subject. Any help would be appreciated.

Thanks!

[RupokMember]

Hi there,

This is not an issue related with this thread and you should open a new topic for this. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

[SummitParticipant]

Hey,

Thanks for replying. Sorry about getting off topic. I went ahead and started a new thread.

Thank you as always!

[RupokMember]

That’s great @summit

Consider this thread as closed and hopefully you will get your solution on other thread as soon as possible.

Cheers!

[Author]

Posts