[GiobarthParticipant]

Hi,
I need to reproduce the menu as we see here: http://elevationchurch.org/ – 6 menu options centralized and the logo on left side. Also, it has to be the same menu in all pages where I can use a different slider for each page, the names on the menu with no underline, just the different light gray when the mouse is over, anyways, exactly you see on this page: http://elevationchurch.org/.
Can you please help me to design this menu?
Many thanks,
Gio
(My information is below)

[GiobarthParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! Looks like you already added this CSS :

.masthead-inline .desktop .x-nav {
	float: none !important;
	margin: 0 auto !important;
	max-width: 845px !important;
}

Let’s update this to :

.masthead-inline .desktop .x-nav {
	float: none !important;
	margin: 0 auto !important;
	max-width: 620px !important;
}

It should do the job.

Cheers!

[GiobarthParticipant]

Hi Rupok,
It worked but it was not exactly the goal.
The menu options has to be centered but the logo has to be positioned to the extremely left.
It is possible to create this with XTheme?

– Also the space between the menu options has be smaller;

– I will design a different slider to use behind the menu for each page but the menu will be the same for all pages;

– I’m trying to remove the shadow box upon the menu options to have the words clean like the design I’m sending to you but I don’t know which code I need to delete 🙁

– Need to remove the gray line on top with the text on the left and social media icons on the right;

I would appreciate your precious help,

Many thanks,
Gio

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-navbar .x-container.max.width {
    width: 100%;
    max-width: 100%;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 10px;
    padding-right: 10px;
}

I’m trying to remove the shadow box upon the menu options to have the words clean like the design I’m sending to you but I don’t know which code I need to delete

Please provide us with screen shot.

Please disable topbar under Customize/Header.

Thanks.

[GiobarthParticipant]

Hi Christopher:

The results are amazing, we are almost there!

I need to remove this shadow upon the menu options, the gray transparency and make the home option letter white (actually is gray).

Is that possible to have color gray only when using the mouse over the words?

And also I was checking, the other pages don’t have the same menu and logo I have now in the home page.
How can I firm this menu and logo to all the pages?

Attached is the results we have so far.

Many thanks,
Gio

[RadModerator]

Hi there,

Please remove these CSS’ from your cornerstone’s custom CSS

.x-navbar .desktop .x-nav>li:hover {
    background-color: rgba(255,255,255,0.1);
}

and

.x-navbar .desktop .x-nav>li:hover>a, .x-navbar .desktop .x-nav>li:hover>a>span {
    box-shadow: none;
    color: #fff;
}

And please add this new CSS

.x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu li > a:hover, .x-navbar .desktop .sub-menu li.x-active > a, .x-navbar .desktop .sub-menu li.current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav li.x-active > a, .x-navbar .mobile .x-nav li.current-menu-item > a {
    color: #fff;
}
.x-navbar .desktop .x-nav > li > a:hover {
color : #798589;
}
.x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none !important;
}

The navbar/navigation looks different from other pages is because you only customized it for your home page.

1. Your custom CSS are added in cornerstone’s custom CSS, hence, those custom CSS is only active on the page where it’s added. If you wish them to take effect globally, then move your cornerstone’s custom CSS to customizer’s custom CSS.

2. Your custom CSS classes have prefixes of .home, which indicates, the styling will only be applied to home page. You should remove .home if you wish it to be applied globally.

Thanks!

[GiobarthParticipant]

Hi,

A few questions:

1) I deleted the prefix .home and the website menu is not the same on all pages yet…:( Don’t know what to do next…
I really need this menu being the same to use different slider revolutions under them. Looks like I’m doing something wrong or don’t have the correct CSS…

2) I tried to delete the underline from all menus and links using two different CSS with no success so far:

body a {
text-decoration:none !important;
}

and

.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 {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

Can you please check and see why is not working?
Many, many thanks,
Gio

[JoaoModerator]

Hi There,

Please remove the code from your Cornerstone > Settings > Custom > CSS and place on

Appereance > Customizer > Custom > CSS

Hope it helps

Joao

[GiobarthParticipant]

Hi there,
I copied all the CSS from Cornerstone > Settings > Custom > CSS to Appereance > Customizer > Custom > CSS but the words on menu keeps underlined and the shadow gray bar is still there.
I need help, I’m doing something wrong for sure.
Thanks for everything,
Gio

[ChristopherModerator]

Hi there,

There are still some CSS code on your home page/cornerstone/custom css.

Please add following code in customizer:

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

Are you referring to navbar background color? if so, you should edit following code :

.x-navbar {
    background-color: rgba(0,0,0,0.25) !important;
    position: absolute;
    width: 100%;
}

Hope it helps.

[GiobarthParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add this code :

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
    outline: none;
}

Hope it helps.

[GiobarthParticipant]

You’re awesome Chris! Thanks for everything! I’m closing the topic.

[FriechModerator]

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

Cheers!

[Author]

Posts