[inalienablearmsParticipant]

Hello,
First time working with X or Cornerstone, but so far, extremely impressed! It’s made diving into building our website a lot of fun.

Custom Header (I assume)
I’m trying to recreate the look and function of the header of this website: https://www.greeneyetactical.com/
By recreate, I mean I’d like to have the logo on Left, with the menu/navbar ‘appear’ inside the header, and enable the social/contact icons on top. I’d like to replicate the translucent feel of the header too, where you can see the slider through it.

Current Demo Site:
http://t3demo.flywheelsites.com/
(I’ll have to provide you username & password in private mode upon reply.

Navbar question:
I can’t seem to figure out how to make the menu span the full width of the screen, like it does in the Integrity 1 demo. I found similar forum topics, but wasn’t able to get the CSS to work.

[inalienablearmsParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

That is possible using default X theme menu. On Appearance > Customize > Header >Logo and Navigation: Choose Inline. Currently, you’re using a Ubermenu which is always a block. Ubermenu settings also set it’s background.

[inalienablearmsParticipant]

Thanks, I’ll give that a try and see what I can come up with. A couple of clarification points (sorry for my lack of expertise)

Can I then provide the custom code/html to style the header appropriately? If so, is that obvious in the customizer somewhere?

Does this mean that I wouldn’t be using the Ubermenu at all anymore, and it would default to the standard theme menu? What’s the best way to turn off the ubermenu, and subsequently edit the theme menu?

Along the same lines of the question, if I wanted to create that similar styled footer, is that possible through the default theme as well, or is there a place to modify the html/css for the footer currently in use.

Thanks in advance!

[inalienablearmsParticipant]

This reply has been marked as private.

[inalienablearmsParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Seems like you achieve already what were you looking for in the header.

Regarding the footer I am not sure what you want to achieve, as you don´t have widgets you could go to Appereance > Customizer > Footer and turn off the footer areas.

Let us know if you need help with anything else.

Joao

[inalienablearmsParticipant]

Hi,

I’m still a bit lost on how to customize the position of the menu, so that I can have it move further to the left on screen. I don’t mind messing around with positioning code with the CSS, I’m just not sure how to target the element and begin.

additionally, I’m reading up on the submenu styling, but havent found how to change the look of it yet now that I’m not using ubermenu. So in the attached screenshot none of the submenu items are visible due to color issues until hovered over.

[inalienablearmsParticipant]

Additional question.

When I change the Navbar Top Height setting to 0px in order to allow the slider to be seen through the header, the auto full size doesnt appear to span the page any longer. It’s off by about 100px.

meaning the next section of the site is now visible at the bottom of the screen. Is there a different way to accomplish both of these objectives? slider stays full screen, but is visible under the header?

[inalienablearmsParticipant]

I fixed the submenu style issue, thanks to another thread response.

the navbar height question, I believe I need to rephrase and request something different:

For the “header” space at the top. Is there a way to create the header “space” or “rectangle”, and then locate the logo and the “menu” inside it. I think right now, the menu itself is expanding when I’m working with the CSS. I only say that, because when I hover over the gray space below the text, it still activates the submenu.

I’m thinking of it as one container with two objects I would like to position inside it.

[FriechModerator]

Hi There,

Sorry, I am not entirely certain what you’re trying to do base on your post.

So I try to understand it base on the CSS code that you’re using. I see you’re trying to make the container fullwidth so the translucent dark background will go from edge to edge.

/* ADJUST NAVBAR LOCATION */
.x-navbar .x-container.max.width {
	width: 100%;
	max-width: 100%;
	background: rgba(0, 0, 0, .7);
}

That results for your Header go on edge left, and for the menu to edge right.

Then you added this code:

/* ADJUST HEADER LOGO POSITION */
a.x-brand {
    float: left;
	margin-left: 150px;
}

To give the logo a space on the left. But your menu remains on the right edge (that is one of your issue right?)

You don’t actually need those two blocks, you just need to apply the translucent dark background directly on the navbar.

/*BACKGROUND FOR THE ACTUAL NAVBAR*/
.x-navbar {
	background: rgba(0, 0, 0, .7) !important;
}

This way you’ll keep the container width and the logo does not go left edge and the menu does not go edge right.

The other thing that I understand is you only want the hover menu to take effect when the cursor is actually pointing the menu text, right? But you need to understand that the menu text has a height (height of the navbar) so the space above and below it, is consider a part of that menu item.

To neutralize the hover effect on menu, you can add this on your custom CSS (
This will remove the hover effect of your menu).

/*REMOVE THE HOVER EFFECT OF THE MENU ITEMS*/
.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 {
	color: #fff;
	box-shadow: none !important;
}

And then lets add a hover effect that is specifically trigger when the menu text is hovered.

/*HOVER EFFECT SPECIFICALLY FOR THE MENU TEXT*/
.x-navbar .desktop .x-nav > li > a > span:hover,
.x-navbar .desktop .x-nav > .x-active > a > span,
.x-navbar .desktop .x-nav > .current-menu-item > a > span {
	color: green;
}

Hope this helps, somehow.

Cheers!

[inalienablearmsParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

#1 Please check your topbar content, make sure you closed all the <i> tags that you open. Or any tags you have use on the topbar content.

#2 Use this custom css to change the social icon links color and font-size.

.x-topbar .x-social-global a {
	color: green;
	font-size: 32px;
}
.x-topbar .x-social-global a:hover {color: #fff;}

We need to fix the topbar content first before we provide a css for it, there seems to be a malformed html tags somewhere on that content.

#3 Please navigate to Appearance > Customize, in Customizer under the Header panel look for the Navbar Top Height option and provide your header an actual height. Height that is enough to accommodate the logo.

Thanks.

[inalienablearmsParticipant]

Friech, your support is simply amazing, thank you for the continued direction.

Previous Issues:
1. Resolved.
2. Perfect! I can work with this and tweak as needed now.
3. Resolved, may require a little bit of fine tuning, but you got me in the right direction!

Newly Identified – Mobile/responsive
1. As soon as the window gets smaller than about 1067px the menu flips to centered, and a new bar/container appears, which I need to style with the same translucent effect so the whole area matches. I couldnt detect which element it was to style it. See screenshot.
1.a. Is there CSS I can use so that when it’s in this responsive style, the logo would center align and auto size for the viewport? see screenshot

2. Now that the HTML issue is resolved in #2 previously, is there some CSS I can use to position/style these three icon/text elements on the left side of the top bar?

[JoaoModerator]

Hi There,

Please dd the following code to Appereance Customizer > Custom > CSS

@media (max-width: 767px) {
.x-topbar .p-info {
    background: none;
}}
@media (max-width: 480px) {
a.x-brand {
    display: block;
    width: 100%;
    margin-left: 120px;
}
.x-btn-navbar.collapsed:hover,.x-btn-navbar, .x-btn-navbar.collapsed {
  
    margin-right: 165px;
    background: none;
    color: white;
    box-shadow: none;
    margin-top: 0px;
}
}

Regarding your Question 2) Would you mind to clarify what you want to achieve.

Thanks

[Author]

Posts