Wordpress CSS Responsive menu too wide

Hello,

At www.oakhonesty.com my menu up top is too wide. I want it to be small enough that it fit up top in an iPad (1024px wide screen) but right now the menu jumps down when the screen is smaller than a width of approximately 1300px, way too wide.

I want the padding to the left to be small and the space between menu elements to be small so that the top logo/menu bar stays one horizontal bar until the screen is less than 1024px wide. Then it can jump down if it's smaller.

Just start with the browser wide and shrink it in and you'll see the menu pops lower too easily.

Thanks
LVL 7
weikelbobAsked:
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.

Slick812Commented:
greetings weikelbob, , I looked at ur page at http://oakhonesty.com/  and it's HTML code, I did as you suggest - " browser wide and shrink it in and you'll see" - and my opinion is that your entire "responsive CSS setup" for the TOP "Icon Menu" header space is not responsive, the menu OR the Image does not change at all in response, the image is shown only in one size (width), the menu also does not change, the menu does however drop below the image at a certain width, BUT when below then image and menu are awkward looking, and do NOT line up (centered or left of page).
But before I get to the CSS, you have what I think is a serious HTML error in line 96 -

    <div <div class="collapse navbar-collapse navbar-ex1-collapse">

the <div does not have the proper > closing , and in browsers this can cause some BAD rendering for many elements (I do not think the "<div " should be there at all), and ALSO your elements for MANY things in your <header> are improperly overlapping and this can also screw up your browser display.  
The closing tag </div> for the -
    <div id="page" class="hfeed site">
is placed incorrectly BEFORE the </header> and  </nav> closing tags which are suppose to be inside the   id="page"  <div>.

You might need to fix these html errors before you do anything else. These WP themes use some form of Bootstrap for responsive, with classes like "col-sm-12", , you may need to start your header design over from scratch, using the wordpress bootstrap responsive classes.
1
weikelbobAuthor Commented:
Thanks for helping me with that HTML error. Does it look good?

I just want to decrease the padding to the left of the menu for now. Without doing that, I can't do what I want. After I get that, I'll use some bootstrap CSS
0
weikelbobAuthor Commented:
Or to float:left that part of the menu. I can do it in firebug but I can't seem to do it for real
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.

weikelbobAuthor Commented:
I floated it left and now the padding is to the right
0
weikelbobAuthor Commented:
I can't get it. I'm new to mobile responsiveness too, so I'm afraid I am going to have to be walked through this. The menu should not drop down at all. It is small it should fit for a pretty small screen, then change to a square if the screen gets smaller, never drop down. I'll make my logo mobile responsive. I know how to do that.
0
Slick812Commented:
I just looked at the HTML for www.oakhonesty.com , , and you DID NOT go through this code and clean it up, the errant "<div " is gone , but you did nothing for the incorrect overlapping of -

<div id="page" class="hfeed site">
      <header id="masthead" class="site-header">
            <nav class="navbar navbar-default">

and their closing tags!    Also your page does not have closing tags for the <body> and <html> tags. . .

- - - - - - - - - - - - - -

I have tried dragging the browser to smaller width again, and your menu does drop down again, but it lines up with the image but not correctly. . . .
You say - "The menu should not drop down at all. It is small it should fit for a pretty small screen" -  but I do not see that as possible with the UN-responsive image, as in firefox I see the
   <div class="collapse navbar-collapse navbar-ex1-collapse">
as  450 x 61
and the icon  image as  549 x 76  with the spacing that's over 1000 px, , but there's another factor in the -
<div class="container">  or the  <div class="row">  that's affecting the width that it drops at, which seems incorrect to me.

Your <div> elements for the header space are just to many fo me to deal with, you have container <div> that seem unnessary to me as you have these 3 containers-
   <div class="container">
   <div class="row">
   <div class="site-navigation-inner col-sm-12">

that do not sepatrate anything, and may do things that are not needed for this, if they do not separate anything, shouldn't you have just one container, instead of 3 ?

OH, and where is the CSS written, that you say you have changed?
0
Slick812Commented:
I did the following code today , , BUT your header and nav in -
    <header id="masthead" class="site-header">
has so many containers , , and sub-containters , , and nav containers and - - is so complicated that I could not get a an understanding of the structures and placement in your header -

<!doctype html>
<html class="no-js" lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet" type="text/css">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://oakhonesty.com/xmlrpc.php">

<title>Oak Honesty Web Solutions</title>
<link rel="alternate" type="application/rss+xml" title="Oak Honesty Web Solutions &raquo; Feed" href="http://oakhonesty.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Oak Honesty Web Solutions &raquo; Comments Feed" href="http://oakhonesty.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Oak Honesty Web Solutions &raquo; Home Comments Feed" href="http://oakhonesty.com/sample-page/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/oakhonesty.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.5"}};
			!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='contact-form-7-css'  href='http://oakhonesty.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='sparkling-bootstrap-css'  href='http://oakhonesty.com/wp-content/themes/sparkling/inc/css/bootstrap.min.css?ver=4.2.5' type='text/css' media='all' />
<link rel='stylesheet' id='sparkling-icons-css'  href='http://oakhonesty.com/wp-content/themes/sparkling/inc/css/font-awesome.min.css?ver=4.2.5' type='text/css' media='all' />
<link rel='stylesheet' id='sparkling-fonts-css'  href='//fonts.googleapis.com/css?family=Open+Sans%3A400italic%2C400%2C600%2C700%7CRoboto+Slab%3A400%2C300%2C700&#038;ver=4.2.5' type='text/css' media='all' />
<link rel='stylesheet' id='sparkling-style-css'  href='http://oakhonesty.com/wp-content/themes/sparkling/style.css?ver=4.2.5' type='text/css' media='all' />
<link rel='stylesheet' id='background-manager-pub-css'  href='http://oakhonesty.com/wp-content/plugins/background-manager/resources/css/pub.css?ver=1.2.5.2' type='text/css' media='all' />
<script type="text/javascript">/* <![CDATA[ */window.background_manager_ajax={"url":"http:\/\/oakhonesty.com\/wp-admin\/admin-ajax.php","action":"background-manager"};/* ]]> */</script>
<script type='text/javascript' src='http://oakhonesty.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://oakhonesty.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://oakhonesty.com/wp-content/themes/sparkling/inc/js/modernizr.min.js?ver=4.2.5'></script>
<script type='text/javascript' src='http://oakhonesty.com/wp-content/themes/sparkling/inc/js/bootstrap.min.js?ver=4.2.5'></script>
<script type='text/javascript' src='http://oakhonesty.com/wp-content/themes/sparkling/inc/js/functions.min.js?ver=4.2.5'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var myatu_bgm = {"current_background":{"id":111,"url":"http:\/\/oakhonesty.com\/wp-content\/uploads\/2015\/09\/leaves1920-1080-v1002.jpg","alt":"","desc":"","caption":"leaves1920-1080-v1002","link":"","thumb":"http:\/\/oakhonesty.com\/wp-content\/uploads\/2015\/09\/leaves1920-1080-v1002-150x150.jpg","bg_link":"","transition":"crossfade","transition_speed":0},"change_freq":"0","active_gallery":"110","is_fullsize":"false","is_preview":"false","initial_ease_in":"true","info_tab_thumb":"true","bg_click_new_window":"true","bg_track_clicks":"false","bg_track_clicks_category":"Background Manager","display_on_mobile":"true"};
/* ]]> */
</script>
<script type='text/javascript' src='http://oakhonesty.com/wp-content/plugins/background-manager/resources/js/functions.js?ver=1.2.5.2'></script>
<script type='text/javascript' src='http://oakhonesty.com/wp-content/plugins/background-manager/resources/js/flux.js?ver=1.2.5.2'></script>
<script type='text/javascript' src='http://oakhonesty.com/wp-content/plugins/background-manager/resources/js/pub.js?ver=1.2.5.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://oakhonesty.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://oakhonesty.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.2.5" />
<link rel='canonical' href='http://oakhonesty.com/' />
<link rel='shortlink' href='http://oakhonesty.com/' />
<style type="text/css"></style>	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css" media="screen">body.myatu_bgm_body { background-image: url('http://oakhonesty.com/wp-content/uploads/2015/09/leaves1920-1080-v1002.jpg') !important;background-position: center center !important;background-repeat: no-repeat !important;background-attachment: fixed !important;background-color: transparent !important; } </style>

</head>

<body class="home page page-id-2 page-template-default myatu_bgm_body">
<div id="page" class="hfeed site">
  <header id="masthead" class="site-header">
  <nav class="navbar navbar-default">
    <div class="navbar-header" style="width:49%; border: 1px solid #c00; padding-left:5%;">
		            <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>

  <a href="http://oakhonesty.com/"><img src="http://oakhonesty.com/wp-content/uploads/2015/09/cropped-cropped-clearv2002.gif" alt="Oak Honesty Web Solutions" style="width:100%; max-width:549px; min-width:220px;"/></a>
  
	</div><div class="collapse navbar-collapse" style="width:421px;margin:0; border:1px solid #0bb;"><ul id="menu-main" class="nav navbar-nav" style="float:none;margin:0;padding:0;"><li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-30 active"><a title="Home" href="http://oakhonesty.com/" style="padding-left:0;">Home</a></li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39 dropdown"><a title="Start Company" href="#" data-toggle="dropdown" class="dropdown-toggle">Start Company <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a title="Starting An Informational Site Company" href="http://oakhonesty.com/on-site-seo/">Starting An Informational Site Company</a></li>
	<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a title="Starting an E-commerce Company" href="http://oakhonesty.com/ecommerce-seo-starting-or-improving/">Starting an E-commerce Company</a></li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-33 dropdown"><a title="Web Design" href="#" data-toggle="dropdown" class="dropdown-toggle">Web Design <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a title="Request Some Standard Web Design" href="http://oakhonesty.com/standard-web-design/">Request Some Standard Web Design</a></li>
	<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a title="Request Some Ecommerce Web Design" href="http://oakhonesty.com/ecommerce-web-design/">Request Some Ecommerce Web Design</a></li>
</ul>
</li>
<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65" style="padding:0;"><a title="Contact" href="http://oakhonesty.com/contact-us/" style="padding-right:0;">Contact</a></li>
</ul></div>
  </nav>
  </header><!-- #masthead -->
  </div>


	<div id="content" class="site-content">

		<div class="top-section">
								</div>

		<div class="container main-content-area">
			<div class="row">
				<div class="main-content-inner col-sm-12 col-md-8 ">
	<div id="primary" class="content-area">

		<main id="main" class="site-main" role="main">

			
				

<div class="post-inner-content">
<article id="post-2" class="post-2 page type-page status-publish hentry">
	
	<div class="entry-content">
		<p>Oak Honesty is a web design and SEO company built on honesty and transparency. We help people start new, exciting businesses creating new information or selling products. We also do web design and E-commerce web design services. Finally, we provide SEO audits and services on an ongoing basis with existing companies.</p>
<p>Some of the key features we work with are SEO friendly web design, mobile friendly websites, education along with the work, emphasizing the importance of good content, making people&#8217;s dreams come true when starting a company, working with social media, and creating a progression towards more sales, profit, and conversions.</p>
<p>A company founded on honesty and transparency is really important in the web design and SEO community. Although we do quality work, we believe that web design and SEO should be affordable.</p>
<p>Give us a call, we&#8217;d be glad to help,</p>
<p>Bob Weikel<br />
Owner<br />
OakHonesty</p>
		    
		</div><!-- .entry-content -->
	</article><!-- #post-## -->
</div>
			

			
		</main><!-- #main -->
	</div><!-- #primary -->
</body></html>

Open in new window



Sorry but the above coding only does a half way responsive and does NOT WORK when the menu goes to the small mobil bars, , This only adds the icon image as changing it's width on width change, what really happens is that this <div> -
    <div class="navbar-header" style="width:49%; border: 1px solid #c00; padding-left:5%;">
changes width, it is an UN-necessary container for the image (my opinion), but it holds the <div> class="btn navbar-toggle" so I did not remove it.

There are too many parts in your wordpress template header for me to figure out how to have your responsive. You might contact the person that wrote this template, and ask them how to get the results you need.
0
weikelbobAuthor Commented:
At this point I'm done with this template. Can you direct me to a free mobile responsive basic template that I can modify and it actually work? This is my third one, all from EE. I'm not really upset, just ready to find something descent.

Thanks!
0
Slick812Commented:
OK , , u say -
"Can you direct me to a free mobile responsive basic template that I can modify and it actually work?"

There are thousands and thousands of web site "Templates" available from a thousand different online sources from ten thousand different template authors., This appears to be a Word-Press template (theme), and there are thousands of those WP templates available in so many different arrangements, images, backgrounds, icons, titles, footers, headers of various sizes (large or small headers, etc) .
There are arrangements with  single, two and three column setups, some for "Music" sites, others for "Finance" , others for "Sports" sites, and the variety goes on and on forever. BUT, almost ALL current WP themes are "Responsive", but are customized for your changes in responsive, only if YOU know how use the standard WP bootstrap to make your site design respond to changes by including the proper "wp-row" classes.

You can look at these for WP themes -
    https://wordpress.org/themes/
    http://www.templatemonster.com/welcome/premium-wordpress-themes/
    http://themefuse.com/
    https://www.wphub.com/

and there are many other theme sites, , I do not use wordpress MCV, as its to complicated and meant to be a "Blog" site. But I do not believe any expert can recommend a theme - template because the requiremants are "Artistic" and subjective for a section (header , main, footer) arrangement and the animated gismos, and  sliders that are out there.

you might look at this tutorial about usin WP Themes -
    https://www.youtube.com/watch?v=mIjXwA5YtK8
1

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
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
Web Development

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.