X Menu and Submenu Tweaks

Support
#1

Hi again,

I scoured your posts for answers but couldn’t find any code that does what I need at realhdr.com. Don’t worry about none of the menu links working - I’m just working on the landing page.

  1. Remove the 1 or 2px-high white line under the Navbar. Moving the photo up didn’t work…
  2. Move the Portfolio submenu down so that its top is at the bottom of the Navbar
  3. Make the mobile menu button transparent and change its line colors to white
  4. Replace the mobile menu button with text that says Menu
    I tried this that I saw in a recent post:
    .x-btn-navbar .x-icon-bars:before {
    content: “Menu”;
    text-transform: uppercase;
    }
    but it didn’t have any effect.
  5. What is the @media syntax to change the display width where X presents the mobile nav button? I’d like to keep menu words longer than it does now.

Thanks very much!

#2

Hi There,

Please add the following CSS to theme Options CSS

.x-navbar {

    box-shadow: 0px;
    box-shadow: none !important;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: 0px;
}

.x-navbar .desktop .x-nav > li ul {
    top: 45px;
}

.x-btn-navbar.collapsed {
    background: none;
    color: white;
    box-shadow: none;
 
}

.x-btn-navbar i:before {
content : "MENU" !important;
}

For the question number 5 add the following CSS to Theme Options CSS and adjust according to your wishes:

@media ( max-width: 970px ) {

	.masthead-inline .x-btn-navbar {
		display: block;
		float: right;
	}
}

@media (min-width: 969px) {

	.x-nav-wrap.desktop {
		display: block;
	}

	.masthead-inline .x-btn-navbar {
		display: none;
	}
}

Hope it helps!

#3

Thanks a lot, Joao.

The menu is almost there. The only thing I wasn’t able to pull off was removing the little white line below the Navbar:

I still have the line under the blue tape that’s now the Navbar background and need some more help making it go away.

I don’t know it it matters, but I used a Stacked Navbar to align the menu items center, and then put in
/* Hide Logo Text bar in Stacked arrangement */
.x-logobar {display: none;}
to hide the logotext. Would it be better to just ask how to remove the logotext from the inline Navbar and center the menu items? Is this maybe messing up the ability to remove the white line? It works fine and I’ll leave it like it is if it isn’t causing a problem.

Theme Options CSS is the same as Global CSS, ism’t it? I know - naive question, but the second part of your reply didn’t have any effect when I changed the variables, and there’s every chance I did something wrong.

#4

And I’m paying attention - Honest!

I inspect the x-navbar element in Firefox and see this:

When I click the red NO symbol the left of border-bottom, the bottom border goes away just like I want.

The bottom border also goes away when I set border-bottom to 0px with that selector active:

So I copied the entire section up to the closing brace into the Global CSS in my newly-installed Child Theme, set border-bottom to 0px and nothing happened. Nothing happened when I set it to 10px, either, and that causes the expected change when I inspect and change the value in Inspector.

What is overriding that css change? How can I beat it into submission? I’m trying to learn from the masters, and they would be you!

Thanks again.

Alan

#5

And I just fixed it, and will really appreciate it if you explain WHY I fixed if you have a minute :thinking:…

Just for fun, I went into Appearance > Themes > Customize button for X Child Theme > Additional CSS, added
.x-navbar {
border-bottom: 0px;
}
and BINGO - it worked; border-bottom went away. Why did it work in the Additional CSS location but not in Appearance > Themes > Customize button for X Child Theme > Custom > Edit Global CSS?

When you guys say to add statements in Customizer, do you specifically mean Additional CSS? What’s the difference between that and Global css? A friend of mine in North Caroline, USA used to say “I’m lost like a ball in tall grass.” That’s how I feel now that I accidentally made this work. Should I move all of my css entries into Additional CSS? They work, but is Global CSS a bad place to have them for overall compatibility?

And which location is “Theme Options CSS”?

Many thanks for helping me understand what I’m doing!

#6

Hi There,

Please use the theme options just, it is pretty much the same but the theme is going forward to be focused on theme options rather than the customizer and that would be the best pratice reccomended.

On your WP Top Admin Bar > Hover X > Launch > Options.

Hope it helps!

#7

Thanks. I’ll add all css there from now on.

#8

You’re always welcome!

Additional CSS is a feature from wordpress added since Wordpress 4.7. No matter what the theme, there is Additional CSS as long as wordpress is updated. Theme Options Global CSS/Customiser is part of the theme. When you switch theme, it is not available anymore.