Ez jili 22 login,啶ぞ啶ㄠじ啶苦 啶膏啶掂ぞ啶膏啶ム啶?啶膏ぎ啶膏啶ぞ.REGISTER NOW GET FREE 888 PESOS REWARDS!

Resolved Norman Cates
(@normancates)

5 years, 7 months ago

It would be really useful to be able to have the Top Bar menu support sub-menus.

And even the mega menu…

Is this possible?

Thanks,
Norman

Viewing 5 replies - 1 through 5 (of 5 total)

Theme Author

terrathemes

(@terrathemes)

5 years, 7 months ago

Hi Norman,

to create such a functionality we need to customize some functions.

First of all you should have a child theme active. You need to copy the following function from inc/functions/functions-header.php to your child themes functions.php or modify it directly in the file (where you will lose your changes on updates).

if ( ! function_exists( 'meteorite_nav_topbar' ) ) :
	/**
	 * Prints the HTML for the topbar above the menu.
	 *
	 * @since 1.0.6
	 */
	function meteorite_nav_topbar() {
		if ( get_theme_mod( 'topbar_type', 'none' ) != 'none' ) {

			$claim = '';
			if ( get_theme_mod( 'claim', 'Display your clame here.' ) != '' ) {
				$claim .= "<span class='claim'>" . esc_html( get_theme_mod( "claim", __( "Display your claim here.", 'meteorite' ) ) ) . "</span>";
			}
			$contact = '';
			if ( get_theme_mod( 'tel', '111.222.333' ) != '' ) {
				$contact .= "<span class='tel'>" . esc_html( get_theme_mod( "tel", "+1 (0) 999-000" ) ) . "</span>";
			} 
			if ( get_theme_mod( 'email', '[email protected]' ) != '' ) {
				$contact .= "<a href='mailto:" . antispambot( sanitize_email( get_theme_mod( 'email', '[email protected]' ) ) ) . "'><span class='email'>" . antispambot( sanitize_email( get_theme_mod( 'email', '[email protected]' ) ) ) . "</span></a>";
			}
			$social = '';
			if ( get_theme_mod( 'social-media-one', 'www.facebook.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-one', 'www.facebook.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-two', 'plus.google.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-two', 'plus.google.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-three', 'www.youtube.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-three', 'www.youtube.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-four', 'twitter.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-four', 'twitter.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-five', 'linkedin.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-five', 'linkedin.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-six', 'pinterest.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-six', 'pinterest.com' ) ) . "' target='_blank'></a></li>";
			} 
			?>
			
			<div class="topbar">
				<div class="container">
					<div class="row">
						<?php if ( get_theme_mod( 'topbar_type', 'none' ) == 'topbar_1' ) { ?>
							<div class="contact-field contact-field-left col-md-8">
								<?php echo $contact; ?>
							</div>
							<div class="social-icons social-nav social-nav-right col-md-4">
								<nav>
									<ul>
										<?php echo $social; ?>
									</ul>
								</nav>
							</div>
						<?php } elseif ( get_theme_mod( 'topbar_type', 'none' ) == 'topbar_2' ) { ?>
							<div class="social-icons social-nav social-nav-left col-md-4">
								<nav>
									<ul>
										<?php echo $social; ?>
									</ul>
								</nav>
							</div>
							<div class="claim-field claim-field-right col-md-8">
								<?php echo $claim; ?>
							</div>
						<?php } elseif ( get_theme_mod( 'topbar_type', 'none' ) == 'topbar_3' ) { ?>
							<div class="contact-field contact-field-left col-md-6">
								<nav>
									<?php echo $contact; ?>
								</nav>
							</div>
							<div class="claim-field claim-field-right col-md-6">
								<?php echo $claim; ?>
							</div>
						<?php } elseif ( get_theme_mod( 'topbar_type', 'none' ) == 'topbar_4' ) { ?>
							<div class="topbar-nav topbar-nav-left col-md-8">
								<nav>
									<?php
									wp_nav_menu( 
										array(
											'theme_location' => 'topbar', 
											'menu_id' => 'topbar-menu', 
											'depth' => 1, 
											'fallback_cb' => 'meteorite_menu_fallback' 
										) 
									); 
									?>
								</nav>
							</div>
							<div class="social-icons social-nav social-nav-right col-md-4">
								<nav>
									<ul>
										<?php echo $social; ?>
									</ul>
								</nav>
							</div>
						<?php } ?>
					</div><!-- .row -->
				</div><!-- .container -->
			</div><!-- .topbar -->
			<?php
		}
	}
endif;

Find the line with 'depth' => 1, and remove it. The menu depth is the number of nested links your menu can have.

Then you can create your top menu just like you create a normal mega menu (as far as you’re using the Meteorite mega menu and not a plugin for this).

Now you need the stylings of the main menu for the top menu. These should be the styles for the top menu:

.topbar-nav ul li.menu-item-has-children > a::after {
	content: "\f107";
	font-family: "FontAwesome";
	padding-left: 7px;
}
.topbar-nav ul ul li.menu-item-has-children > a::after {
	content: "\f105";
}
.topbar-nav ul {
	margin: 0;
	padding: 0;
}
.topbar-nav ul li {
	display: inline-block;
	list-style: none;
	padding: 0 12px;
	position: relative;
}
.topbar-nav ul li.mega-menu {
	position: static;
}
.topbar-nav ul li:last-child {
	padding-right: 0;
}
.topbar-nav ul li a {
	color: #fff;
	cursor: pointer;
	display: block;
	font-family: "Libre Franklin", "Helvetica", "Arial", sans-serif;
	font-size: 14px;
	position: relative;
	text-decoration: none;
}
.topbar-nav > ul > li > a {
	padding: 33px 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.topbar-nav ul ul {
	background-color: #202529;
	border-top: 2px solid #337ab7;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	opacity: 0;
	position: absolute;
	top: 115%;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	visibility: hidden;
	width: 180px;
	z-index: 750;
}
.topbar-nav ul ul li {
	display: block;
	line-height: 20px;
	padding: 0;
	text-align: left;
}
.topbar-nav .submenu li a {
	color: #fff;
}
.topbar-nav ul ul li a {
	padding: 8px 18px;
	width: 180px;
}
.topbar-nav ul ul ul {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	float: left;
	left: 100%;
	top: 0;
}
.topbar-nav ul ul ul ul {
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
}
.topbar-nav ul li:hover > ul {
	left: auto;
	opacity: 1;
	top: 100% !important;
	visibility: visible;
}
.topbar-nav ul ul li:hover > ul {
	top: 0 !important;
}
.topbar-nav li:hover > ul ul {
	left: 100%;
	top: -2px;
}
.topbar-nav li a:focus,
.topbar-nav li a:hover {
	color: #337ab7;
}
.topbar-nav .mega-menu .sub-menu {
	left: 0;
	position: absolute;
	padding: 25px 0;
	width: 100%;
}
.topbar-nav .mega-menu > .sub-menu > li {
	display: inline-block;
	float: left;
	width: 25%;
}
.topbar-nav .mega-menu .sub-menu li:nth-of-type(4n+1) {
	clear: both;
}
.topbar-nav .mega-menu .sub-menu li a {
	padding: 12px 18px !important;
	width: 100%;
}
.topbar-nav .mega-menu .sub-menu ul {
	position: static;
}
.topbar-nav .mega-menu .sub-menu ul li {
	width: 100%;
}
.topbar-nav .mega-menu li.menu-item-has-children > a::after {
	content: "";
	padding: 0;
}
.topbar-nav .mega-menu.menu-headings > ul > li > a {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
	font-weight: 400;
}
.topbar-nav ul .mega-menu ul ul {
	background-color: transparent;
	border: none;
	box-shadow: none;
	opacity: 0;
	padding: 0 !important;
	visibility: hidden;
}
.topbar-nav ul .mega-menu:hover ul ul {
	opacity: 1;
	visibility: visible;
}
.topbar-nav ul .mega-menu ul ul ul {
	display: none;
}

However, keep in mind that this might not work on mobile devices. There you would need further customizations.

Please tell me how it goes.

Thread Starter

Norman Cates

(@normancates)

5 years, 7 months ago

Thanks for this.

However… When I put the new code into the functions.php it completely distorts the top bar.

It doesn’t cause any problems if there are no sub-menus set up on the top bar.

But the moment we add a sub menu item, it pushes all the top header items around.

A number of the top bar menu items vanish, and the image header and Primary menu get squished to the right…

Cheers,
Norm

Theme Author

terrathemes

(@terrathemes)

5 years, 7 months ago

Well, I just tested this and it works.

Please make sure you use this code in the functions.php, e.g. at the end of the file. I have removed the depth there already.

if ( ! function_exists( 'meteorite_nav_topbar' ) ) :
	/**
	 * Prints the HTML for the topbar above the menu.
	 *
	 * @since 1.0.6
	 */
	function meteorite_nav_topbar() {
		if ( get_theme_mod( 'topbar_type', 'none' ) != 'none' ) {

			$claim = '';
			if ( get_theme_mod( 'claim', 'Display your clame here.' ) != '' ) {
				$claim .= "<span class='claim'>" . esc_html( get_theme_mod( "claim", __( "Display your claim here.", 'meteorite' ) ) ) . "</span>";
			}
			$contact = '';
			if ( get_theme_mod( 'tel', '111.222.333' ) != '' ) {
				$contact .= "<span class='tel'>" . esc_html( get_theme_mod( "tel", "+1 (0) 999-000" ) ) . "</span>";
			} 
			if ( get_theme_mod( 'email', '[email protected]' ) != '' ) {
				$contact .= "<a href='mailto:" . antispambot( sanitize_email( get_theme_mod( 'email', '[email protected]' ) ) ) . "'><span class='email'>" . antispambot( sanitize_email( get_theme_mod( 'email', '[email protected]' ) ) ) . "</span></a>";
			}
			$social = '';
			if ( get_theme_mod( 'social-media-one', 'www.facebook.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-one', 'www.facebook.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-two', 'plus.google.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-two', 'plus.google.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-three', 'www.youtube.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-three', 'www.youtube.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-four', 'twitter.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-four', 'twitter.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-five', 'linkedin.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-five', 'linkedin.com' ) ) . "' target='_blank'></a></li>";
			}
			if ( get_theme_mod( 'social-media-six', 'pinterest.com' ) != '' ) {
				$social .= "<li><a href='" . esc_url( get_theme_mod( 'social-media-six', 'pinterest.com' ) ) . "' target='_blank'></a></li>";
			} 
			?>
			
			<div class="topbar">
				<div class="container">
					<div class="row">
						<?php if ( get_theme_mod( 'topbar_type', 'none' ) == 'topbar_1' ) { ?>
							<div class="contact-field contact-field-left col-md-8">
								<?php echo $contact; ?>
							</div>
							<div class="social-icons social-nav social-nav-right col-md-4">
								<nav>
									<ul>
										<?php echo $social; ?>
									</ul>
								</nav>
							</div>
						<?php } elseif ( get_theme_mod( 'topbar_type', 'none' ) == 'topbar_2' ) { ?>
							<div class="social-icons social-nav social-nav-left col-md-4">
								<nav>
									<ul>
										<?php echo $social; ?>
									</ul>
								</nav>
							</div>
							<div class="claim-field claim-field-right col-md-8">
								<?php echo $claim; ?>
							</div>
						<?php } elseif ( get_theme_mod( 'topbar_type', 'none' ) == 'topbar_3' ) { ?>
							<div class="contact-field contact-field-left col-md-6">
								<nav>
									<?php echo $contact; ?>
								</nav>
							</div>
							<div class="claim-field claim-field-right col-md-6">
								<?php echo $claim; ?>
							</div>
						<?php } elseif ( get_theme_mod( 'topbar_type', 'none' ) == 'topbar_4' ) { ?>
							<div class="topbar-nav topbar-nav-left col-md-8">
								<nav>
									<?php
									wp_nav_menu( 
										array(
											'theme_location' => 'topbar', 
											'menu_id' => 'topbar-menu',
											'fallback_cb' => 'meteorite_menu_fallback' 
										) 
									); 
									?>
								</nav>
							</div>
							<div class="social-icons social-nav social-nav-right col-md-4">
								<nav>
									<ul>
										<?php echo $social; ?>
									</ul>
								</nav>
							</div>
						<?php } ?>
					</div><!-- .row -->
				</div><!-- .container -->
			</div><!-- .topbar -->
			<?php
		}
	}
endif;

Otherwise I would need some screenshots or better inspect the code.

Thread Starter

Norman Cates

(@normancates)

5 years, 7 months ago

Thank you. That does work.

Did anything change? If not, then perhaps something cached my CSS or something so it didn’t use the new CSS?

Dunno.

Anyway, thank you again!

Theme Author

terrathemes

(@terrathemes)

5 years, 7 months ago

Did anything change?

I asked you before to remove one line in the code I gave you at first. Maybe something went wrong there.
The cache thing could be true too. After adding code/css it’s always a good thing to empty the server- and browser-side cache.

You’re welcome Norman! I’ll mark the topic as resolved.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Can we make the Top Bar menu able to have sub items, and use the mega menu?’ is closed to new replies.