Asking for help with the coding for Sparkling top menu/naviagtion

Sparkling
1

First of all, I love the Sparkling theme and I’ve been using it since last year, basically when it released on WordPress.

I was wondering if anyone could help me figure out the CSS & HTML coding to grab from the Sparkling theme of just the top menu/navigation that I have on my website so that I can copy it and make it match with my Coppermine Photo Gallery theme. Just the top menu is all that I want to copy and match into my Coppermine Photo Gallery theme, not the entire Sparkling theme. I would love to have the same top menu/navigation at the very top of my current Coppermine Photo Gallery theme, and that includes the toggle navigation for smartphones and tablets, as well as my site’s logo. I’ve come across a tutorial at http://documentation.coppermine-gallery.net/en/theme_create_matching_page_tutorial.htm which didn’t help me, especially since the Sparkling theme is a responsive theme with a drop down menu (Sparkling is more complicated, at least to me).

Here’s my site: http://mikeposnerhits.com
Here’s my gallery: http://mikeposnerhits.com/gallery

I’d really appreciate the help. I just know that I’ll need to add the coding to the template.html as well as in style.css files in my current Coppermine Photo Gallery theme to make it work. I tried it once, and I couldn’t get it to work like it does on my main website. My site logo did appear, and my site links showed up all at once without the drop down menu or toggle navigation (I should’ve taken a screenshot of it to show you). Here’s the coding that I tried below.

I tried applying this in style.css file in my Coppermine Photo Gallery theme.

/* Drop Down Menu */
.dropdown-menu li a:hover, 
.dropdown-menu li a:focus, 
.dropdown-menu .active a:hover, 
.dropdown-menu .active a:focus {
background-color: #000000;
color: #999999;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
}

.dropdown-menu li a, 
.dropdown-menu .active a {
background-color: #000000;
color: #FFFFFF;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
}

.navbar-default .navbar-nav .open:hover .dropdown-menu li a:hover, .dropdown-menu li a:hover {
color: #999999;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
}

@media (min-width: 768px)
.navbar-toggle {
    display: none;
}

.navbar-default .navbar-toggle {
    border-color: #ddd;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7;
}

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

@media (min-width: 768px)
.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.navbar.navbar-default, .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    background-color: #000000;
}

.navbar.navbar-default {
    margin-bottom: 0;
    font-weight: 500;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

I tried applying this in template.html file in my Coppermine Photo Gallery theme.

<header id="masthead" class="site-header" role="banner">
		<nav class="navbar navbar-default" role="navigation">
			<div class="container">
				<div class="row">
					<div class="site-navigation-inner col-sm-12">
						<div class="navbar-header">
							<button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>

							
							<div id="logo">
								<a href="http://mikeposnerhits.com/"><img src="http://mikeposnerhits.com/wp-content/uploads/2015/08/Mike-Posner-Hits-Fansite-logo-4.png"  height="76" width="300" alt="MikePosnerHits.com"/></a>
							</div><!-- end of #logo -->

							
							
						</div>
						<div class="collapse navbar-collapse navbar-ex1-collapse"><ul id="menu-top-menu" class="nav navbar-nav"><li id="menu-item-9464" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9464 active"><a title="News" href="http://mikeposnerhits.com">News</a></li>
<li id="menu-item-3939" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3939 dropdown"><a title="Mike" href="#" data-toggle="dropdown" class="dropdown-toggle">Mike <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-13412" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13412"><a title="Biography" href="http://mikeposnerhits.com/mike-posner/biography/">Biography</a></li>
	<li id="menu-item-13414" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13414"><a title="Wikipedia" href="http://mikeposnerhits.com/mike-posner/wikipedia/">Wikipedia</a></li>
	<li id="menu-item-13417" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13417"><a title="Facts & Trivia" href="http://mikeposnerhits.com/mike-posner/facts-trivia/">Facts & Trivia</a></li>
	<li id="menu-item-13418" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13418"><a title="Quotes" href="http://mikeposnerhits.com/mike-posner/quotes/">Quotes</a></li>
	<li id="menu-item-13419" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13419"><a title="Trademark" href="http://mikeposnerhits.com/mike-posner/trademark/">Trademark</a></li>
	<li id="menu-item-13416" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13416"><a title="Mike Posner and The Brain Trust" href="http://mikeposnerhits.com/mike-posner/the-brain-trust/">Mike Posner and The Brain Trust</a></li>
	<li id="menu-item-13420" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13420"><a title="Fan Mail Address" href="http://mikeposnerhits.com/mike-posner/fan-mail/">Fan Mail Address</a></li>
	<li id="menu-item-13421" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13421"><a title="Contact & Booking Information" href="http://mikeposnerhits.com/mike-posner/contact-booking/">Contact & Booking Information</a></li>
</ul>
</li>
<li id="menu-item-3958" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3958 dropdown"><a title="Music" href="#" data-toggle="dropdown" class="dropdown-toggle">Music <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-13449" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13449"><a title="Discography" href="http://mikeposnerhits.com/music/discography/">Discography</a></li>
	<li id="menu-item-13450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13450"><a title="Live" href="http://mikeposnerhits.com/music/live/">Live</a></li>
	<li id="menu-item-13451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13451"><a title="Remixes" href="http://mikeposnerhits.com/music/remixes/">Remixes</a></li>
	<li id="menu-item-13453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13453"><a title="Benzi & Mike Posner Mixes" href="http://mikeposnerhits.com/music/mixes/">Benzi & Mike Posner Mixes</a></li>
	<li id="menu-item-13452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13452"><a title="Song Credits" href="http://mikeposnerhits.com/music/song-credits/">Song Credits</a></li>
	<li id="menu-item-13448" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13448"><a title="Awards & Nominations" href="http://mikeposnerhits.com/music/awards-nominations/">Awards & Nominations</a></li>
	<li id="menu-item-10549" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10549"><a title="Radio Request" href="http://mikeposnerhits.com/music/radio-request/">Radio Request</a></li>
</ul>
</li>
<li id="menu-item-13729" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-13729 dropdown"><a title="Events" href="#" data-toggle="dropdown" class="dropdown-toggle">Events <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-6232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6232"><a title="Events & Tour Dates" href="http://mikeposnerhits.com/events/">Events & Tour Dates</a></li>
	<li id="menu-item-13730" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13730"><a title="Past Events & Tours" href="http://mikeposnerhits.com/past-events/">Past Events & Tours</a></li>
</ul>
</li>
<li id="menu-item-3304" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3304"><a title="Gallery" href="http://mikeposnerhits.com/gallery/">Gallery</a></li>
<li id="menu-item-11717" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11717 dropdown"><a title="Lyrics" href="#" data-toggle="dropdown" class="dropdown-toggle">Lyrics <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-13422" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13422"><a title="31 Minutes To Takeoff Lyrics" href="http://mikeposnerhits.com/lyrics/31-minutes-to-takeoff/">31 Minutes To Takeoff Lyrics</a></li>
	<li id="menu-item-13423" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13423"><a title="Sophomore Album Lyrics" href="http://mikeposnerhits.com/lyrics/sophomore-album/">Sophomore Album Lyrics</a></li>
	<li id="menu-item-16040" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16040"><a title="The Truth Lyrics" href="http://mikeposnerhits.com/lyrics/the-truth/">The Truth Lyrics</a></li>
	<li id="menu-item-13424" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13424"><a title="A Matter Of Time Lyrics" href="http://mikeposnerhits.com/lyrics/a-matter-of-time/">A Matter Of Time Lyrics</a></li>
	<li id="menu-item-13425" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13425"><a title="One Foot Out The Door Lyrics" href="http://mikeposnerhits.com/lyrics/one-foot-out-the-door/">One Foot Out The Door Lyrics</a></li>
	<li id="menu-item-13426" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13426"><a title="The Layover Lyrics" href="http://mikeposnerhits.com/lyrics/the-layover/">The Layover Lyrics</a></li>
	<li id="menu-item-13427" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13427"><a title="Collaborations Lyrics" href="http://mikeposnerhits.com/lyrics/collaborations/">Collaborations Lyrics</a></li>
	<li id="menu-item-13428" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13428"><a title="Non-Album Lyrics" href="http://mikeposnerhits.com/lyrics/non-album/">Non-Album Lyrics</a></li>
</ul>
</li>
<li id="menu-item-11762" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11762 dropdown"><a title="Videos" href="#" data-toggle="dropdown" class="dropdown-toggle">Videos <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-13439" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13439"><a title="Official Music Videos" href="http://mikeposnerhits.com/videos/music/">Official Music Videos</a></li>
	<li id="menu-item-13440" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13440"><a title="Webisode Videos" href="http://mikeposnerhits.com/videos/webisodes/">Webisode Videos</a></li>
	<li id="menu-item-13441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13441"><a title="Performance Videos (2009-2012)" href="http://mikeposnerhits.com/videos/performances-1/">Performance Videos (2009-2012)</a></li>
	<li id="menu-item-13442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13442"><a title="Performance Videos (2013-2015)" href="http://mikeposnerhits.com/videos/performances-2/">Performance Videos (2013-2015)</a></li>
	<li id="menu-item-13443" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13443"><a title="Interview Videos" href="http://mikeposnerhits.com/videos/interviews/">Interview Videos</a></li>
	<li id="menu-item-13444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13444"><a title="Documentary Videos" href="http://mikeposnerhits.com/videos/documentaries/">Documentary Videos</a></li>
	<li id="menu-item-13445" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13445"><a title="Song Videos" href="http://mikeposnerhits.com/videos/songs/">Song Videos</a></li>
	<li id="menu-item-13446" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13446"><a title="Other Videos" href="http://mikeposnerhits.com/videos/others/">Other Videos</a></li>
	<li id="menu-item-13447" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13447"><a title="Extra Videos" href="http://mikeposnerhits.com/videos/extras/">Extra Videos</a></li>
</ul>
</li>
<li id="menu-item-3980" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3980 dropdown"><a title="MPH" href="#" data-toggle="dropdown" class="dropdown-toggle">MPH <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-13731" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13731"><a title="About MPH" href="http://mikeposnerhits.com/about/">About MPH</a></li>
	<li id="menu-item-13733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13733"><a title="Disclaimer & Terms of Use" href="http://mikeposnerhits.com/disclaimer-terms-of-use/">Disclaimer & Terms of Use</a></li>
	<li id="menu-item-13735" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13735"><a title="Love from Mike Posner & Management" href="http://mikeposnerhits.com/love-from-mike-posner/">Love from Mike Posner & Management</a></li>
	<li id="menu-item-13734" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13734"><a title="Fan of the Month" href="http://mikeposnerhits.com/fans/">Fan of the Month</a></li>
	<li id="menu-item-13732" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13732"><a title="Contact" href="http://mikeposnerhits.com/contact/">Contact</a></li>
</ul>
</li>
<li id="menu-item-4080" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4080 dropdown"><a title="Online" href="#" data-toggle="dropdown" class="dropdown-toggle">Online <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-13736" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13736"><a title="Affiliates" href="http://mikeposnerhits.com/affiliates/">Affiliates</a></li>
	<li id="menu-item-13737" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13737"><a title="Apply for Affiliation" href="http://mikeposnerhits.com/become-affiliate/">Apply for Affiliation</a></li>
	<li id="menu-item-13738" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13738"><a title="Links Directory" href="http://mikeposnerhits.com/links/">Links Directory</a></li>
</ul>
</li>
</ul></div>					</div>
				</div>
			</div>
		</nav><!-- .site-navigation -->
	</header><!-- #masthead -->

Not sure if anyone would consider helping me in this situation for this particular question. If not, then I understand. It’s just something that I’ve been wanting to accomplish since I started using a responsive theme for my site’s photo gallery the past few weeks. Thanks in advance!

2

I’m still trying to figure this out. Can anyone please help me out? I’d really appreciate some help with this.

I’m using the Sparkling theme on my website, and I want to add the Sparkling theme’s menu & toggle menu for smaller screens to my gallery theme which is powered by Coppermine Photo Gallery. I need to know all of the codes to make it happen. I need to know what CSS coding to apply to style.css and what codes to apply to template.html of the Coppermine theme.

3

Hi @PinkRoseChristina,

I hope you are well today and thank you for your patience here.

It’s a bit complex to implement it in another theme as we have used bootstrap framework to display this menu.

I will tell you which code in the Sparkling theme is responsible for displaying this menu.

In the theme file style.css the CSS code in between the following comments.

/* =Navigation
----------------------------------------------- */

....

....

/* =Comments
----------------------------------------------- */

In the file header.php the following code.

<?php sparkling_header_menu(); // main navigation ?>

In the file inc/extras.php the following code.

if ( ! function_exists( 'sparkling_header_menu' ) ) :
/**
 * Header menu (should you choose to use one)
 */
function sparkling_header_menu() {
  // display the WordPress Custom Menu if available
  wp_nav_menu(array(
    'menu'              => 'primary',
    'theme_location'    => 'primary',
    'depth'             => 2,
    'container'         => 'div',
    'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
    'menu_class'        => 'nav navbar-nav',
    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
    'walker'            => new wp_bootstrap_navwalker()
  ));
} /* end header menu */
endif;

The whole code in the file inc/navwalker.php

The following bootstrap framework files

/inc/js/bootstrap.min.js
/inc/css/bootstrap.min.css

You will find the bootstrap framework nav menu example on the following page.

http://getbootstrap.com/examples/navbar/

Best Regards,
Movin