Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1] 2   Go Down

Author Topic: Adding matching website navigation to coppermine theme  (Read 23294 times)

0 Members and 1 Guest are viewing this topic.

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Adding matching website navigation to coppermine theme
« on: September 16, 2015, 03:53:23 am »

I was wondering if anyone could help me figure out the CSS & HTML coding to grab from my current WordPress 'Sparkling' theme of just the top menu/navigation so that I can copy it, apply the codes, and make it appear on 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. The WordPress 'Sparkling' theme is a responsive theme, so I'd also like to also include the same toggle navigation for smartphones and tablets, as well as my site’s logo. (See photo that I've attached.)

Yes, I did read the 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 (it's 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'm currently using the Curve Responsive theme. I attempted to create the navigation, but 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).

I tried applying the following in style.css file in my Coppermine Photo Gallery theme.
Code: [Select]
/* 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 the following in template.html file in my Coppermine Photo Gallery theme.
Code: [Select]
<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-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 -->

Thanks in advance! :)
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #1 on: September 16, 2015, 07:41:40 am »

Please attach your curve responsive theme in a zip file and I will help you.
Is very easy and I made the curve responsive theme.
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #2 on: September 16, 2015, 08:00:20 am »

Please attach your curve responsive theme in a zip file and I will help you.
Is very easy and I made the curve responsive theme.
Thank you! Thank you so very much! I really do appreciate the help. I've tried asking for help in 2 other support forums (the WordPress theme creator & my host), and I had no luck.


allvip:  I removed the zip because you have your Google Adsense code. I already downloaded.
« Last Edit: September 16, 2015, 10:26:47 am by allvip »
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #3 on: September 16, 2015, 11:14:43 am »

OK. Sorry about that. I had no idea that I should've left out my Google AdSense code. Oops! I'm glad you have the zip downloaded and removed the zip off of here afterwards. Again, Thank you for helping me! :)
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #4 on: September 16, 2015, 01:23:57 pm »

Sorry I had to go somewhere.
Wait 15 minutes.
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #5 on: September 16, 2015, 01:44:01 pm »

Hi, allvip!

It's no rush at all. Please, take all the time you need. I'm grateful for the help with this.

I just want to add a quick note to inform you about something, just to be on the safe side. I was troubleshooting an issue in WordPress a few hours ago, and so I temporarily activated another WordPress theme for just a few short minutes. I just wanted to let you know this just in case you may have noticed at the time. The WordPress theme that I'm using permanently is called 'Sparkling' by Colorlib, which is the theme that contains the top menu/navigation that I'm wanting to duplicate for the Coppermine curve responsive theme. I'm sorry, I really hope that you didn't notice a different theme on my main site at the time I was troubleshooting an issue. Maybe you didn't notice, and weren't visiting my site at the time. My main site should currently have the 'Sparkling' theme activated at this time. I have a WordPress cache plugin on my main site, which I'm pretty sure I did delete the cache before I logged out a few hours ago. Sorry for any confusion that this may have caused, which I hope hasn't. Thanks again for helping me!
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #6 on: September 16, 2015, 01:50:00 pm »

DONE.

Click outside the menu to close it (attachment menu clicked.jpg).
I hope I did not do any mistakes because I made it in a hurry.

I was troubleshooting an issue in WordPress a few hours ago, and so I temporarily activated another WordPress theme for just a few short minutes. I just wanted to let you know this just in case you may have noticed at the time. The WordPress theme that I'm using permanently is called 'Sparkling' by Colorlib, which is the theme that contains the top menu/navigation that I'm wanting to duplicate for the Coppermine curve responsive theme.

I did not notice. I left for a while.
I did a CSS menu not a jquery menu. Is a little diffrent but very similar to your wordpress one.
LET ME KNOW if you want any changes.

Config - Themes settings - Enable menu icons - No
« Last Edit: September 16, 2015, 02:18:56 pm by allvip »
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #7 on: September 16, 2015, 03:44:45 pm »

DONE.

Click outside the menu to close it (attachment menu clicked.jpg).
I hope I did not do any mistakes because I made it in a hurry.

I did not notice. I left for a while.
I did a CSS menu not a jquery menu. Is a little diffrent but very similar to your wordpress one.
LET ME KNOW if you want any changes.

Config - Themes settings - Enable menu icons - No
Hi allvip!

Well, I'm so sorry, but there is some confusion about the menu. I actually wanted to keep the CPG menu alone, as is, and left like it previously was below the banner/header image (1920x600), and at the very top I wanted the same exact menu as my main site http://MikePosnerHits.com. I wanted the top menu to show the links: News, Mike, Music, Events, Gallery, Lyrics, Videos, MPH, Online. Like the image I've attached below (see attached image sparkling-navi.jpg).

I should have said this before to avoid confusion. I do realize now that I should have said that there should be 2 menus - the CPG menu (below the header), and the site links at the top with the site logo. I'm sorry that I didn't explain in more detail about having both menus.

If you don't mind trying this again, that would be great. I hope I'm not annoying you already. I apologize for the mix up.

If you can try this 1 more time... Add back the previous CPG menu (below the header/banner image) exactly how it was before, and add the new top menu (like my main site w/ drop down menu and toggle menu for small screens: News, Mike, Music, Events, Gallery, Lyrics, Videos, MPH, Online). Would it be possible to fit all the links into 1 line to the right of the logo? Right now on my computer screen, I'm seeing a lot of black background area with the logo in the top left side and menu directly blow the logo (see attached image CPG-curve-responsive-theme-1.jpg). Is it possible to have the links aligned with the logo just the right of it (just like on the main site). If it's better and easier, you can leave out the "children" pages and just only have the "parent" pages/links: News, Mike, Music, Events, Gallery, Lyrics, Videos, MPH, Online. I won't mind having just the "parent" pages if it would look better for smaller screens. Also, the top menu font size is about 1-2 sizes too large. I think it's currently at 110%, maybe 100% is good for large screen? Maybe the top menu font size needs to be set to 90% or 95% for mobile theme in the toggle menu?

I've attached a screen shot of the way the main site's menu on mobile/small screen looks like (see attached image Sparkling-navi-mobile.jpg).

Side note: On the main site (WordPress Sparkling theme) I am just now noticing that the drop down menu isn't working on mobile/smaller screen. This has never happened before, and I'm only just now noticing this today. So, I'll have to try and get that issue resolved later today, I'll visit the support forum for answers. It's always worked in the past, so I'm not sure why it's not working now. I have seen several others complaining about the mobile theme navigation problems lately on the forum of the WordPress 'Sparkling' theme. Hopefully I'll get that resolved soon, I hope.

OK, I hope I explained this much better. Thanks again for helping!
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #8 on: September 16, 2015, 04:07:25 pm »

[UPDATE: ISSUE HAS BEEN FIXED] Side note: On the main site (WordPress Sparkling theme) I am just now noticing that the drop down menu isn't working on mobile/smaller screen. This has never happened before, and I'm only just now noticing this today. So, I'll have to try and get that issue resolved later today, I'll visit the support forum for answers. It's always worked in the past, so I'm not sure why it's not working now. I have seen several others complaining about the mobile theme navigation problems lately on the forum of the WordPress 'Sparkling' theme. Hopefully I'll get that resolved soon, I hope.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #9 on: September 16, 2015, 04:07:43 pm »

Yes to all. I will start now.
Check back in 30 minutes.
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #10 on: September 16, 2015, 06:22:15 pm »

Regarding the mobile toggle menu, I forgot to mention that I'd like to have the links aligned straight down like my main site's navigation does on mobile/small screens (see the previous image I uploaded titled Sparkling-navi-mobile.jpg). Whenever the toggle menu opens to reveal the site links. If it's at all possible. Hopefully I'm making some sense here. Basically, I want it identical as possible to the same menu/navigation on my website (responsive for all screens). :)
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #11 on: September 16, 2015, 06:26:08 pm »

Is this OK?
Sorry for the delay but I wanted to do even the submenus and I did all in CSS, no javascripts (less load for the server).

« Last Edit: September 16, 2015, 08:22:06 pm by allvip »
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #12 on: September 16, 2015, 06:41:40 pm »

Is this OK?
Sorry for the delay but I wanted to do even the submenus and I did all in CSS, no javascripts (lees load for the server).
Yes!!! It all looks great! Thank you! Would you like to email me the zip file? Or I can download the file here if that would be better for you. Either way is fine. I'll be able to upload the new files to my site later on in the day today. It's about 11:40 AM here now, so it will be later this evening when I can test the new theme out.

Thank you so very much for working on it for me! You're amazing! :)
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #13 on: September 16, 2015, 06:44:20 pm »

UPLOADED in the prev post.
You have to open template.html and make the links.
Example: replace <li><a href="#">Mike</a><span class="caret"></span> with <li><a href="THE LINK">Mike</a><span class="caret"></span> etc.

allvip: I forgot a minor detail. I will reupload in 20sec.

« Last Edit: September 16, 2015, 06:51:27 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #14 on: September 16, 2015, 07:12:23 pm »

REUPLOADED.
« Last Edit: September 16, 2015, 07:23:52 pm by allvip »
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #15 on: September 16, 2015, 08:44:51 pm »

OK. I'll download the updated zip file in a few short hours when I get home to my PC. I cannot wait to try out your theme! I'll let you know how it goes. Thank you so much!
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #16 on: September 17, 2015, 06:12:11 am »

Are you happy with the theme?
Do you want me to make changes?
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #17 on: September 17, 2015, 07:21:19 am »

Are you happy with the theme?
Do you want me to make changes?

Hi again, allvip!

The new top menu is looking good. Almost... Just a couple of fixes, adjustments needed.

OK, so I downloaded the zip and uploaded to my files and I've been testing out the theme and I did try to make some adjustments to the top navigation, but without any luck. Usually I can figure out how to make changes successfully on my own, but not this time. I really tried. The top menu looks great and I like it. However, after viewing it from my mobile phone, the drop down links don't open at all when clicked on. I viewed the theme on the Chrome app and the Browser app that is pre-installed on my phone, and both had the same results. The menu works great on a full desktop computer screen, just not on mobile/small screen. The way the toggle menu works on the main site, the parent page links have to be clicked on in order to view the children page links area, and when you click the children links the pages open.

I spent a couple of hours trying different things out, I mostly tried to adjust the padding in the top menu, but had I no luck getting it right. The logo is too far off to the left and I tried to adjust the padding to the left, but I messed it up and changed it back. Also, the menu links are too far to the right, and the drop down menu (parent pages MPH, Online) runs off and causes the side to side scroll bar to appear at the bottom of the page. I tried to apply a higher padding amount to the right side, but I got it wrong and made it worse, so I changed it back. Apparently, menu navigations will never be my thing, I can't figure it out. It's difficult for me. I'm clueless.

I attached some images to give you a visual look at the mobile themes for both the main site and gallery, and the desktop versions of both themes as well. On the last image, I added some notes on it for you to read. If it's okay, I really would like to see the old/previous Curve Responsive CPG menu again. I liked the way it was before in the original theme, and I never wanted the CPG menu changed. I think it's good to have both menus look totally different to separate the two from each other. :)

* I want to post more images for you to view. I'll attach it after posting this post 1st. *

Both the Gallery and Main Site will never look perfectly the same. I do realize it's just not going to happen and that they will be somewhat different, because WordPress and CPG do not work the same way. I wish they did! We totally need a CPG PLUGIN for WordPress.org. Why hasn't this been possible yet? It's 2015! Ha ha ha... I'm only joking here.  :D ;D

Once Again, allvip, Thank You so very much for taking the time to help me with this theme! I really do appreciate all the time you've spent on this. Grateful. :)
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #18 on: September 17, 2015, 07:23:10 am »

more attachments...
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #19 on: September 17, 2015, 08:38:11 am »

I just wanted to add more details about what I meant about the drop down menu not working properly on mobile. When I click the toggle button, the menu opens and all of the links are there. When I click on any of the parent links, the menu closes shut and the pages won't open. This happens over and over again for every link I try. Menu doesn't function on the small screens, like mobile.
Logged
Pages: [1] 2   Go Up
 

Page created in 0.03 seconds with 20 queries.