Adding matching website navigation to coppermine theme

[Αndré]

no javascripts (less load for the server).

FYI: the only load for the server is to transfer the JavaScript code to the client (the same applies for CSS, HTML, etc.). JavaScript itself is interpreted and executed client-sided.

[allvip]

Sorry I was a little busy.
DONE.
Test it and LET ME KNOW if you need changes.
I made the mobile menu with html <span>&#9776;</span> (the 3 line ). I did not used genericons fonts anymore. I commented them out in the code. Less files to load, faster gallery.

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

That happens even on your wordpress site (see attachment 1.jpg). Is normal because the child widh is bigger then the parent width.
Is a normal behavior and it shows only on hover.

I spent a couple of hours trying different things out

Please don't spend time editing. Just ask me. I'll be glad to help.

FYI: the only load for the server is to transfer the JavaScript code to the client (the same applies for CSS, HTML, etc.). JavaScript itself is interpreted and executed client-sided.

I made another menu still in CSS. I usually dislike pages with javascript. They tend to block my browser. Yes, I know he has adsense anyway.

[Αndré]

I usually dislike pages with javascript.

I agree. I just wanted to let you know, that JavaScript isn't processed server-sided

[allvip]

Good to know. Thanks.

[PinkRoseChristina]

Thank you so much, allvip! I will download the updated zip file soon. I haven't done so yet. I will when I get on my computer in a couple of hours. I'll let you know how it works out.

[allvip]

The menu is not working on mobile. I'm working on a jquery menu.

WITH jquery menu ( just a few lines of javascript in template.html, the rest is CSS).

[PinkRoseChristina]

The menu is not working on mobile.

Correct. Unfortunately.

I just uploaded the new files a few minutes ago and then checked from my mobile. When the parent pages are clicked on from a touch screen to open the drop down list of children pages, you're taken to the main site instead. There must be something (code) missing to prevent the parent pages with children to not be functional (not open) and just open the drop down list only so that the children pages can open when clicked on.

However, I've noticed that it works if the screen is touched slowly and delicately, ha ha. But visitors will not know how to touch the drop down menu a certain way on the touch screen, softly and slowly.

If it can't be figured out, maybe I can just have all parent pages and no drop down list with children pages. Or actually, I can replace all "#" in the parent pages with the actual links to those parent pages. The parent pages on my site all have content on them with lists listing all of the children pages. Except for the "Events" page, I believe.

What do you think or suggest, allvip?

The top menu navigation looks great!

[PinkRoseChristina]

The menu is not working on mobile. I'm working on a jquery menu.

OK, allvip! I just saw your updated comment. Thank you! I'll wait. Please take all the time you need. It's no rush.

[allvip]

Reply #25 has the new upload.

[allvip]

&#38;#9776; and &#38;#735; are not fit for mobile.

Replace in template.html

Code Select Expand


            <button class="hamburger">&#38;#9776;</button>
            <button class="cross">&#38;#735;</button>


with

Code Select Expand


            <button class="hamburger"> </button>
            <button class="cross"> </button>


Upload the new style.css

[allvip]

However, I've noticed that it works if the screen is touched slowly and delicately, ha ha. But visitors will not know how to touch the drop down menu a certain way on the touch screen, softly and slowly.

Because is an on hover menu not on click. You have to hover with the finger not to touch but I will change it to be on click not on hover. I did not thought of mobile diffrence from PC.
Check back later or tomorrow.

[PinkRoseChristina]

&#38;#9776; and &#38;#735; are not fit for mobile.

Replace in template.html

Code Select Expand


            <button class="hamburger">&#38;#9776;</button>
            <button class="cross">&#38;#735;</button>


with

Code Select Expand


            <button class="hamburger"> </button>
            <button class="cross"> </button>


Upload the new style.css

Yay! It's working! I had to change the parent URLs (that have children) all to "#" to make the drop down menu operate properly like it should for mobile.

Example:

Before:

Code Select Expand

<li><a href="http://mikeposnerhits.com/#" target="_blank">Mike</a><span class="caret"></span>


After:

Code Select Expand

<li><a href="#">Mike</a><span class="caret"></span>

I think everything else within the gallery is working as expected, before the new top menu/navi was added. I hope! If you have some time to look at my gallery, please let me know if you see any problems or errors.

Do I still need to make the following changes???

Replace in template.html

Code Select Expand


            <button class="hamburger">&#38;#9776;</button>
            <button class="cross">&#38;#735;</button>


with

Code Select Expand


            <button class="hamburger"> </button>
            <button class="cross"> </button>


THANK YOU, allvip! 

[allvip]

Do I still need to make the following changes???

Replace in template.html

Code Select Expand


            <button class="hamburger">&#38;#9776;</button>
            <button class="cross">&#38;#735;</button>


with

Code Select Expand


            <button class="hamburger"> </button>
            <button class="cross"> </button>


THANK YOU, allvip! 

I don't know how it looks on your mobile phone but on my the 3 lines looks very ugly so is better to use genericons fonts. So the answer is yes. Also replace style.css with the one I attached in Reply #29.

Other then that everything is fine.