Need To Make Navigation Menu CSS Responsive

I have a navigation menu that works great until you get to a tablet or phone size.  You can see it in action at http://www.theherbsplace.com/content/4-Essential_Oil_Recipes_sp_4

This is the specific block I am speaking of.
https://gyazo.com/bd7efe50e0a254937f32f8b64e877a22

When I make the screen smaller it doesn't become responsive like the rest of the site.  I didn't build this menu system it is being generated by a php program so that's why it isn't responsive because it wasn't part of the original template.

Here is the code

.thp-navigation-container {
	/*border: 2px solid #99cc99;*/
	padding-right: 15px;
	padding-left:15px;
	margin: 0 0 30px 0;
	display:table;
	white-space:nowrap;
	margin:0 auto;
	margin-bottom:16px;
}

.thp-navigation-container li a {
	color:#00F;
	text-align:center;
}
.thp-navigation-row {
	width: 100%;
	text-align: center;
}
.thp-navigation-border-bottom {
	border-bottom: 2px solid #99cc99;
}

.thp-navigation-middle-cell {
	width: 49%;
	display: inline-block; 
	vertical-align: top;
}

.thp-navigation-list{
	list-style: none outside none; 
	font-size: 17px; 
	/*text-decoration: underline; */
	padding: 15px 5px 0px; 
	text-align: center;
}

.thp-navigation-list-ptop {
	padding: 0px 5px 15px;
}

.thp-navigation-list-pmid {
	padding: 15px 45px;
}

.thp-navigation-list-pbot {
	padding: 15px 5px 0;
}

.thp-navigation-border-middle {
	border-right: 3px solid #99cc99;
}

Open in new window


I know how to use CSS but this is using some methods I'm not familiar with and I am not sure how to eliminate the table arrangement and have the links stacked on top of each other.  In this manner:

    Sunshine Concentrate Cleaner
    Aromaball Plug-In Diffuser
    Nebulizing Diffuser
    The Art of Oils
    Q&A
    100% Pure Essential Oils
    Essential Oil Accessories
    Essential Oil Kits
    About Quality and Purity
    Tell Me About Essential Oils
    Tips For Essential Oil Use
    Essential Oil Recipes
    Essential Oils SureSource Guarantee
    Authentic Essential Oils vs Therapeutic Grade Essential Oils

Thanks,
sharingsunshineAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Try adding this to your css:
@media screen and (max-width: 768px) {
	#cms #main_section ul, #cms #main_section ol {
		margin-left: 0;
	}
	.thp-navigation-middle-cell {
		display: block;
		width: 100%;
	}
	.thp-navigation-border-middle {
		border: none;
	}
	.thp-navigation-container {
		white-space: normal;
	}
}

Open in new window

If that gets you closer to what you want, we can make additional adjustments.
0
sharingsunshineAuthor Commented:
Wow, that is real close.  This is what it looks like.

https://gyazo.com/1fb164586f9ae3dbad0099c1102de3c4

They seem to be jammed together.  Is there some way to put some padding between them?

Thanks,
0
Tom BeckCommented:
To add padding between list items you would probably need something like this:

.thp-navigation-list-pmid li {
    padding: 5px 0;
}

Adjust as needed.

As for the css I gave you, the margin-left: 0 is being overridden in the first definition. Try replacing what I gave you with this:
@media screen and (max-width: 768px) {
	#cms #main_section .thp-navigation-container ul, #cms #main_section ol {
		margin-left: 0;
	}
	.thp-navigation-middle-cell {
		display: block;
		width: 100%;
	}
	.thp-navigation-border-middle {
		border: none;
	}
	.thp-navigation-container {
		white-space: normal;
	}
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

sharingsunshineAuthor Commented:
spacing is working for everything above the green line but not below it.

I wanted to get rid of the green line and tried this change to your code

.thp-navigation-border-middle, thp-navigation-border-bottom {
            border: none;
      }

Now I need the green line gone the spacing to work for the lines below the green line and the entries to not have such broad spacing that you can tell there were 3 distinct areas on the larger screens.
0
Tom BeckCommented:
In that case you will probably want to add the same padding to the bottom group of list items.

.thp-navigation-list-pbot li {
    padding: 5px 0;
}

And replace the media query I gave you with this:
@media screen and (max-width: 768px) {
	#cms #main_section .thp-navigation-container ul, #cms #main_section ol {
		margin-left: 0;
	}
	.thp-navigation-middle-cell {
		display: block;
		width: 100%;
	}
	.thp-navigation-border-middle {
		border: none;
	}
	.thp-navigation-container {
		white-space: normal;
	}
        .thp-navigation-list-pmid {
                padding: 0;
        }
        .thp-navigation-list {
                padding: 0;
       }
}

Open in new window

0
sharingsunshineAuthor Commented:
the spacing at the bottom works now but still have the green line but now the top spacing is absent.

https://gyazo.com/bc08f3ec6311f4b3b26fa70ae88064db

I am including my code so you can tell me if I have something incorrect.

@media screen and (max-width: 768px) {
	#cms #main_section .thp-navigation-container ul, #cms #main_section ol {
		margin-left: 0;
	}
	.thp-navigation-middle-cell {
		display: block;
		width: 100%;
	}
	.thp-navigation-border-middle {
		border: none;
	}
	.thp-navigation-container {
		white-space: normal;
	}
        .thp-navigation-list-pmid {
                padding: 0;
        }
        .thp-navigation-list {
                padding: 0;
       }
	   .thp-navigation-list-pbot li {
    padding: 5px 0;
}
}

Open in new window

0
Tom BeckCommented:
We'll keep trying then. At this point, I think it's more a matter of miscommunications than having the wrong css. I'm suggesting css for padding at the <li> level but it's not being added. You suggested a css to remove the green border but it's not on your page.
@media screen and (max-width: 768px) {
	#cms #main_section .thp-navigation-container ul, #cms #main_section ol {
		margin-left: 0;
	}
	.thp-navigation-middle-cell {
		display: block;
		width: 100%;
	}
	.thp-navigation-border-middle, .thp-navigation-border-bottom {
		border: none;
	}
	.thp-navigation-container {
		white-space: normal;
	}
        .thp-navigation-list-pmid {
                padding: 0;
        }
        .thp-navigation-list li {
                padding: 5px;
        }
        .thp-navigation-list {
                padding: 0;
         }
	  .thp-navigation-list-pbot li {
                padding: 5px 0;
         }
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sharingsunshineAuthor Commented:
This is showing what your latest css produced.  

test_navigation_marked.jpg
#1 is the spacing I want for all entries

#2 is what I was calling a border but should have said green line.

Hope this is more clear.
0
Tom BeckCommented:
This is what I'm seeing in Firefox. You may need to clear your browser cache.
Screen shot
0
sharingsunshineAuthor Commented:
So glad you sent me your screenshot.  Thanks for all the help.
0
Tom BeckCommented:
You're welcome. Thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.