Menu parents horizontal spacing

Hurrah! Here comes the cavalry! Thanks for helping @electricfeet and Merry Xmas!

The new theme version includes an option to make the main menu drop down on hover but I was seeing some issues with it enabled so I turned it off.

I’m hesitant to post my CSS here because I know I’ll be sent to the back of the class to wear the dunce’s hat, but here it is (without your Snippet above). If you wanted to marvel at one of my complete pages, I would happily send you a Safari webarchive file..

/*
 Theme Name:     Customizr Child
 Theme URI:      http://mysite.com/
 Description:    My description
 Author:         Me
 Author URI:     http://mysite.com/
 Template:       customizr
 Version:        1.0.0
*/

/* Your awesome customizations start right here !
-------------------------------------------------------------- */
body {
font-family: Trebuchet MS, sans-serif;
}

/* Adjust text leading */
article.row-fluid {
line-height: 150%;
}

/* photo caption padding */
.wp-caption img {margin-bottom: 0.6em;
}
.wp-caption-text {
padding-left: 5px;
padding-right: 5px;
}

/* Slider controls - hide all */
.carousel-control {
display:        none;
}

/*Reduce vertical space between slider and feature circles*/
#main-wrapper {
  margin-top: 10px;
  margin-bottom: 10px;
}
.marketing {
margin-top: -5px;
}
.marketing .span4 + .span4 {
    margin-top: 10;
}

/* Reduce gap between Zoom Image & FP Header  */
.widget-front > h2 {
margin-top:     -5px;
margin-bottom:  0px;
}

/* Reduce whitespace  */
.home #main-wrapper {
margin-bottom:  -40px;
}

/*Reduce space around horizontal divider*/
.featurette-divider {
  margin: 25px 0;
}

/* Doesnt work*/
#main-wrapper {
margin-top: 20px;
margin-bottom: 20px;
}

/* my custom page icon - not on blog */
body.page:not(.home) #main-wrapper .format-icon {
position: relative;
padding-left: 50px;
}
body.page:not(.home) #main-wrapper .format-icon:before {
content: " ";
opacity: 1;
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
display: block;
background-image: url("http://localhost:8888/sitename/wp-content/uploads/2013/11/bslogo40x40_on_grey.png");
background-repeat:no-repeat;
}

/* start hover dropdown menu */
ul.nav li.dropdown > ul.dropdown-menu {
	padding-top: 10px;
	margin: 0;
	}
.nav > li > a.a-caret {
	display: block;
	padding: 8px;
	position: absolute;
	height: 10px;
	width: 10px;
	top: 1px;
	left: 10px;
	}
.nav > li > a.a-stripped {
	padding: 5px 2px 5px 38px;
	}
.navbar .nav .dropdown-toggle .caret {
	margin-top: 4px;
	margin-left: 1px;
	}
.navbar .nav > li > .dropdown-menu:before {
	left: 16px;
	}
.navbar .nav > li > .dropdown-menu:after {
	left: 17px;
	}
.navbar .navbar-inner {
	box-shadow: 0 2px 15px rgba(0,0,0, 0.12);
	}
.navbar .nav > li > .dropdown-menu:before {
	border-bottom: 7px solid rgba(153, 153, 153, 0.27);
	}
.navbar .nav > li > .dropdown-menu:after {
	border-bottom: 6px solid rgba(255,255,255,.9);
	}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
	background-color: #ececec;
	border-radius: 4px;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
	}
@media (min-width: 980px) {
	ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu,
	ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
	ul.nav li.dropdown ul.dropdown-menu:hover {
		display: block;
		z-index: 1001;
		}
	}
@media (max-width: 979px) {
	.nav > li > a.a-caret {
		box-shadow: 0 1px 3px rgba(0,0,0,.35);
		height: 12px;
		width: 12px;
		top: 2px;
		left: 8px;
		}
	.nav > li > a.a-stripped {padding-right: 45px; padding-left: 45px;}
	ul.nav li.dropdown.open ul.dropdown-menu  {
		background-color: #ececec;
		border-radius: 4px;
		box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
		}
	.dropdown-submenu > a:after {
		border-left-color: transparent;
		border-top-color: #ccc;
		border-width: 5px 5px 0 5px;
		}
	.dropdown-submenu:hover > a:after {
		border-top-color: #fff;
		}
	.dropdown-submenu:hover > a:after {
		border-left-color: transparent;
		}
	ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu ul.dropdown-menu {
		background-color: white;
		box-shadow: inset 0 1px 4px rgba(0,0,0,.27);
		display: block;
		position: relative;
		margin-right: 4px;
		bottom: 2px;
		}
	ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu:hover > a {
		color: white;
		}
	}
/* end hover dropdown menu */

/* Menu text to red on hover */
.navbar .nav > li > a:hover {
color: #DE491F;
}

/* Menu text to blue on visited  */
.navbar .nav > li.current-menu-item > a,
.navbar .nav > li.current-menu-ancestor > a {
color:        #8F48E2;
}

@media (min-width: 979px) {
/* Reposition menu carats above 980px */
.navbar .nav li.dropdown a .caret {
position:relative;
left:20px;
top:12px;
}
}

@media (max-width: 767px) {
  /* Remove overflow scrolling on mobiles*/
  .row-fluid [class*="span"] {
    margin-left: 0;
    }
  /* make blog entry titles smaller on mobiles */
  h2.entry-title  {
    font-size: 160%;
    line-height: 110%;
    }
}

/* Adds menu word to 3bar */
.btn-navbar {
width:          90px;
height:         30px;
vertical-align: top;
}

.btn-navbar:after {
content:        "Menu";
float:          right;
margin:         -16px 0 0 0;
}

/* Change 3bar Menu Button color  */
.navbar .btn-navbar {
background-image: -webkit-linear-gradient(top, #8f48e2, #8f48e2);
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
  color: white;
  background-color: #de491f;
  *background-color: #de491f;
}

/* Removes main menu box shadow */
.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px ;
-moz-box-shadow: 0px 0px 0px ;
box-shadow: 0px 0px 0px transparent;
background:none;
}

/* Change hyperlink color and buttons*/
a {color: #8F48E2;
}
a:visited {color:	#C495F0;
}
a:hover, a:focus {color: #DE491F;
}

/* Change Featured Pages Button color  */
.btn.btn-primary.fp-button {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #ee7c2a;
  background-image: -moz-linear-gradient(top, #8f48e2, #723ab5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8f48e2), to(#723ab5));
  background-image: -webkit-linear-gradient(top, #8f48e2, #723ab5);
  background-image: -o-linear-gradient(top, #8f48e2, #723ab5);
  background-image: linear-gradient(to bottom, #8f48e2, #723ab5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff78c40' , endColorstr='#ffe16309' , GradientType=0);
  border-color: #723ab5 #723ab5 #8f48e2;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #723ab5;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn.btn-primary.fp-button:hover,
.btn.btn-primary.fp-button:focus,
.btn.btn-primary.fp-button:active,
.btn.btn-primary.fp-button.active,
.btn.btn-primary.fp-button.disabled,
.btn.btn-primary.fp-button[disabled] {
  color: white;
  background-color: #723ab5;
  *background-color: #8f48e2;
}
.btn.btn-primary.fp-button:active,
.btn.btn-primary.fp-button.active {
  background-color: #8f48e2 9;
}
.btn.btn-primary.fp-button:hover,
.btn.btn-primary.fp-button:focus,
.btn.btn-primary.fp-button:active,
.btn.btn-primary.fp-button.active,
.btn.btn-primary.fp-button.disabled,
.btn.btn-primary.fp-button[disabled] {
  color: white;
  background-color: #723ab5;
  *background-color: #8f48e2;
}
.btn.btn-primary.fp-button:active,
.btn.btn-primary.fp-button.active {
  background-color: #8f48e2 9;
}

/* Tagline - keep but hide (prevents menu jumping up at 1830px)            */
.navbar-wrapper .navbar h2, h2.site-description  {
color: white;
font-size: 0%;
margin: -10px; /* reduce white space above 3bar menu */
}

@media (min-width: 1200px) {
/*Stop the slider growing crazily*/
    #customizr-slider {
        max-width: 1200px;
        margin-left:auto;
        margin-right:auto;
        }
}

footer#footer .colophon .pull-right a {
color: #8f48e2;
}

/* enlarge sidebar Social Icons */
.tc-sidebar .social-block {
font-size: 1.5em;
}

/* sidebar colour change */
.tc-sidebar {
  background-color: rgba(143, 72, 226, 0.1);
}

/* Hide sidebar vertical divider */
#right.widget-area:before, #right.widget-area {
  border-left: 0px none white;
}

/* testimonials page indents + default to grey text  */
.hms-testimonial-group { margin-bottom: 20px;
padding-left: 10%;
padding-right: 10%;
padding-top: 1%;
font-size: 100%;
color: #808080;
}

/* testimonials page vary style for alternate texts  */
.hms-testimonial-container:nth-child(even) {
font-style: italic;
color: #707070;
}

/* Testimonials widget default text style + color */
.hms-testimonials-rotator {
font-style: italic;
color: #606060
}

/*  testimonials author alignment + color */
.hms-testimonial-container .author { font-weight:bold;
font-size: 0.9em;
font-style: normal;
line-height: 1.9;
text-align: right;
padding-right: 3%;
color: #5a5a5a;
}

/*  testimonials widget buttons */
.hms-testimonials-rotator .controls {
text-align: center;
font-weight: normal;
font-style: normal;
font-size: xx-small;
margin-left: 12%;
margin-right: 12%;
border-style: solid;
border-width: medium;
border-color: rgba(143, 72, 226, 0.5);
border-radius: 25px;
background-color: #fafafa;
}

@media (max-width: 979px) {
/* testimonial widget buttons - add margin to stop wrap in small screens */
.hms-testimonials-rotator .controls {
margin-left: 1px;
margin-right: 1px;
  }
}

/* testimonials page para spaces + horizontal divider rules */
.hms-testimonial-container { margin-bottom: 10px;
border-bottom: thin dotted #5a5a5a;
}

/* Make Testimonial Page narrow */
.page-id-171 .entry-content {
padding-right: 5%;
}

/* Testimonial form field mods */
.hms-testimonials-form input[type="text"],
.hms-testimonials-form input[type="email"],
.hms-testimonials-form textarea
{
margin-left: -50%;
font-family: Trebuchet MS, sans-serif;
font-weight: 800;
color: #8f48e2;
}
.hms-testimonials-form  input[type="submit"] {
margin-left: -50%;
font-family: Trebuchet MS, sans-serif;
color: #b985f7;
}
.hms-testimonials-form input[type="text"],
.hms-testimonials-form input[type="email"]
{
width: 99%;
}
/* End testimonial submit form fields*/

/* Main Search button mods */
#searchsubmit {
font-family: Trebuchet MS, sans-serif;
color: #b985f7;
}
#searchsubmit:hover{
color:#de491f;
}
#searchform input[type="text"] {
width: 90%;
}
/* End Main Search button mods */

/* Adjust Page Title font + weight */
.entry-title {
font-size: 44px;
font-weight: 200;
color: #de491f;
}

/* Adjust Widget Title font + leading*/
.widget-title {
font-weight: 100;
margin-bottom: 10px;
color: #de491f;
}

/*  Widget area padding */
.right .widget-area {
margin-left: 5%;
margin-right: 5%;
}

What are you actually trying to do?

Er, I wish I could remember. I think I wanted a hover dropdown with a clickable parent.

…And then, days later, I think I wanted to force the 3-bar menu to trigger early because my main menu was wrapping onto two lines, which I hate.

However, if I can squeeze the main menu together a bit more, it might solve the wrapping problem.

I’m off to play with your shortcode version – and to re-try horiz padding snippet.

[Sometimes I am shocked by how much code it appears to take to achieve something very small – but probably that’s because I don’t know the better way.]

OK, I have removed the big hover-dropdown-menu slug of code from my original CSS and started over using your minimalist code. [Some of the deleted code gave me a custom 3-bar menu dropdown menu which I liked and now can’t figure out how to restore as I’m playing around with too many different elements in there – but more of that anon].

Of course, once I started again from scratch, I found several other things I wanted to modify so my code has grown like Topsy again.

The good news is that I now have a 9-parent main menu which:

a) has a hover dropdown and a clickable parent;
b) is squeezed horizontally to occupy less screen estate;
c) doesn’t wrap;
d) doesn’t jump up and right at extreme screen widths;
e) doesn’t jump down at 1192px just before the 3-bar menu kicks in;
f) therefore remains aligned with my logo;
g) is more closely associated with its caret arrows and its dropdown menus.

In addition to using your code, I have committed what is possibly a cardinal sin by giving my main menu an absolute position. Here’s my CSS:

/* main menu position */
.navbar .navbar-inner {
  margin: 25px 20px -20px -20px;
  padding-left: 5px;
  max-width: 97%;
position:absolute;top:-50px;
}
/* Change main menu padding: 2nd and 4th for horiz padding */
.navbar .nav > li > a {
  padding: 5px 16px 5px 16px;
}
/* Reposition main menu carets */
.navbar .nav li.dropdown a .caret {
position:relative;
top: -18px;
left: -1px
}
/*Move main dropdown menu up to carets*/
.dropdown-menu {
position:absolute;
top: 45px;
left: 4px;
}

To stop my menu jumping up in wide screens (into the space assigned to the hidden Tagline), I reactivated the Tagline and gave it font attributes of size:0% and color:white.

navbar .btn-navbar did the trick so either my memory has gone or I’m going backwards fast. Trouble is I need to move the 3-bar dropdown menu along with the button and I’m having difficulty – unless there’s an uber-container which will move everything in one hit.

I hoped that .nav-collapse.in.collapse would do it but while it does move the menu, it leaves a duplicate behind which flashes up briefly as the dropdown menu is closing – giving me no chance to lay a cursor on it so that I can identify it. It doesn’t show up in the DOM so I seem to be stuck with this phantom.

I tried moving something called .menu-menu-1-container but that gave very weird results so I put it back sharpish.

This is my CSS so far:

.navbar .btn-navbar {
position:fixed;
right: 70px;
}
.nav-collapse.in.collapse {
position: fixed;
right: 60px;
top: 190px;
}

…but I’m on the point of starting over (again). Ideally, I need to find out why my main menu code pushes my 3-bar menu over to the left and fix it from there.