WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Menu parents horizontal spacing (12 posts)

  1. chappie
    Member
    Posted 7 months ago #

    I wanted to squeeze my main menu parent items closer together and space them more evenly so I stole a bit of CSS from ElectricFeet (which came with a 'not updated for 3.1.5' warning). It gave me just about what I wanted:

    /* Change menu padding: 2nd and 4th for horiz padding */
    .navbar .nav > li > a {
      padding: 5px 16px 5px 16px;
    }

    However, I assume that it has messed with some background stuff because when I click on the parent of one of the dropdown menus, the mousedown event generates an unwanted ">recessed rectangle under the cursor.

    Does anyone know what this is and how I need to modify it? I think its the rectangle which defines the clickable area which has somehow shrunk and made itself visible on mousedown. Certainly, the clickable area of each menu title has contracted.

    I'm running 3.1.5 but using a CSS Snippet, rather than the new menu option, to generate my hover dropdowns.

    Thanks for any help - and a very merry Xmas to all.

  2. ElectricFeet
    Member
    Posted 7 months ago #

    Can you provide a link? (Or post all your CSS here?)

    What do you mean by "rather than the new menu option"?

  3. chappie
    Member
    Posted 7 months ago #

    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%;
    }
  4. ElectricFeet
    Member
    Posted 7 months ago #

    Hmm, there's a lot of CSS in there, much of which I'm not sure is necessary.

    What are you actually trying to do? If it's simply to make the dropdowns drop down on hover, then the only CSS you need is:

    @media (min-width: 980px) {
    /*make the menu sub-menu items drop down on mouse hover, but only with full menu, not collapsed*/
      ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
        margin: 0;
        }
    }

    So as the doctor might say "where does it hurt?", I would say "what are you trying to do?"

  5. chappie
    Member
    Posted 7 months ago #

    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.]

  6. ElectricFeet
    Member
    Posted 7 months ago #

    Ah, the creative process is sometimes very chaotic! :-)

    I find myself working away for days at something, only to throw it away and start from scratch. No matter, you're learning along the way. But the second attempt always proceeds more logically.

    I hate the menu wrapping, too. I find it looks really messy. The trick is to reduce it with submenus or, on more complex sites to have multiple menus (for instance, you don't expect to see "delivery/shipping" details in the main menu, but you do expect a menu of sorts in the footer for this sort of thing).

    I suggest you do the following:

    1. Reduce the number of menu items with an acceptable number of dropdowns.
    2. Reduce the padding and text sizes in the menu to what you find to be an aceptable size, aesthetically. You can do this with:
      /* Change menu padding: 2nd and 4th for horiz padding */
      .navbar .nav > li > a {
        padding: 5px 16px 5px 16px;
      /* and change font in menu */
        font-size: 16px;
      }
      
      /* Change font size of first letters in menu */
      .navbar .nav > li > a:first-letter {
        font-size: 16px;
      }
      (as you reduce the font, make sure that the font-size is the same for the first letter as it is for the rest of the word, otherwise the individual menu items may wrap.)
    3. See if the menu still wraps.
    4. If it does, review 1 and 2 again, to see if there's any more wriggle room for dropdowns and sizing.
    5. At this point -- if you've reduced and still cannot stop the wrapping -- then you can define a new point at which you want the responsiveness to kick in.

    I don't know how to do 5 (yet). Check the earlier steps and tell us if you still need it.

  7. chappie
    Member
    Posted 7 months ago #

    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.

  8. chappie
    Member
    Posted 7 months ago #

    One - hopefully temporary - unwanted side-effect of my menu CSS is that something invisible is now pushing my 3-bar menu to the extreme left of the window where its dropdown menu disappears off-screen. I've tried shifting it by targeting every selector I can see but it refuses to budge. Could anyone please tell me which selector moves the 3-bar menu horizontally?

    Alternatively and better, which of the selectors I have targeted with my main menu code above could impact upon the position of my 3-bar menu? TIA.

  9. ElectricFeet
    Member
    Posted 7 months ago #

    If you're making all these changes, you need to learn to use firebug. It's very simple and will answer these sorts of questions.

    .navbar .btn-navbar is what you want.

    p.s. Out of curiosity, why aren't you using the built-in functionality in the latest versions of Customizr to give you the hovering?

  10. chappie
    Member
    Posted 7 months ago #

    Thanks ElectricFeet - I'm fairly sure I have already given .navbar .btn-navbar a good grilling with little or no response but I'll have another go.

    I did use my browser (Safari) developer/inspector tools to discover the names of the 3-bar menu and its multiple containers and only posted here after hours of abject failure.

    I turned off the 3.1.5 hover dropdown option when it seemed to cause a bit of mayhem for me (although it was probably me causing the mayhem):

    To some degree, my 3-bar menu problem illustrated above seems to be linked to the new Navigation options in 3.1.5. With the main menu set to expand on hover, my 3-bar menu loses its nesting.

    Changing the main menu setting to expand on click, the 3-bar menu does deliver a crude nested menu when clicked - but the nesting doesn't work: the sub-menus don't appear.

    This is with 3.1.5, WP 3.8, no custom CSS and all plugins de-activated.

  11. chappie
    Member
    Posted 7 months ago #

    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.

  12. ElectricFeet
    Member
    Posted 7 months ago #

    The neat thing about Firebug over the Safari inspector is that you can add/change/disable the css on the fly.

Reply

You must log in to post.

About this Theme

About this Topic