WordPress.org

Ready to get started?Download WordPress

Forums

Vertical Menu parent and children separated by blank space (6 posts)

  1. DianeTB
    Member
    Posted 1 year ago #

    Hello,
    I naively purchased a template that uses WordPress without really understanding what it meant (my first site) and am new to CSS. I've managed reasonably well with the CSS and am now dealing with the WordPress horizontal menu and categories.

    I believe the template uses WordPress 2.4 based on the following from the pages:
    <!-- End Of Script Generated By WP-PageNavi 2.40 -->

    The template also uses Superfish.js.

    The problem I'm having is when I hover over a parent navigation item with children, the dropdown appears but there is blank space between the parent and its children so the two are not "connected". Thus, I smoothly scroll to the children, hover, or click on them. I have looked all over for the source of the space but I'm at a loss at to what's causing it.

    The style sheet CSS is:

    /*- Nav1 -*/
    #nav1 {
    	font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    	padding:0;
    	margin:0 5px 10px 5px;
    	border-top-width: 1px;
    	border-bottom-width: 1px;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-top-color: #3a3a3a;
    	border-bottom-color: #3a3a3a;
    }
    
    #nav1 ul {
    	width:740px;
    	float:left;
    	padding:0;
    }
    /*Main Nav Bar Spacing*/
    #nav1 ul.sf-menu li {
    position:relative;
    float:left;
    line-height:15px;
    padding:4px 5px;
    text-align:left;
    }
    /*Main Nav Bar Text Formatting*/
    #nav1 ul.sf-menu li a {
    color:#3a3a3a;
    margin:0;
    padding:1px 10px;
    }
    
    <!----> What does this do? #nav1 ul.sf-menu li a:current_page_item { padding:0 9px; color:#686868; background:#686868; border:1px solid #686868; }
    
    /*Main Nav Bar Hover Formatting*/
    #nav1 ul.sf-menu li a:hover, #nav1 ul.sf-menu li a:active {
    	padding:0 9px;
    	color:#333333;
    	background:#c0d3e1;
    	border-top-left-radius:0px;
    	border-top-right-radius:0px;
    	border-bottom-left-radius:0px;
    	border-bottom-right-radius:0px;
    	}
    
    /*Child 1st level Text and Background Formatting*/
    #nav1 ul.sf-menu li ul.children {
    	margin:0;
    	background:#ececec;
    	width:210px;
    	padding:0;
    	border:1px solid #dadada;
    	}
    /*Child 1st level Text Formatting*/
    #nav1 ul.sf-menu li ul.children a {
    	margin: 0px 0px 0px 10px;
    	 padding:0;
    	 color:#2f6d9b;
    	 width:210px;
    	 }
    #nav1 ul.sf-menu li ul.children a:hover {
    	color:#fff;
    	background:#c0d3e1;
    	width:200px;
    	text-decoration:none;
    	border-top-left-radius:0px;
    	border-top-right-radius:0px;
    	border-bottom-left-radius:0px;
    	border-bottom-right-radius:0px;
    	}
    #nav1 ul.sf-menu li ul.children li {
    border:0;
    padding:0;
    }
    
    /*Child 2nd level Formatting - not currently used*/
    #nav1 ul.sf-menu li ul.children li ul.children { border-left:none; border-right:none; }
    #nav1 ul.sf-menu li ul.children ul.children { margin:0 0 0 21px; }

    The Navigation Bar CSS is:

    <div id="nav1">
    
    	<ul class="sf-menu sf-js-enabled">
    	<li class="cat-item cat-item-1"><a href="../htdocs/index.html" title="Home">Home</a>
    	<li class="cat-item cat-item-2"><a href="../htdocs/execution.html" title="Our Approach">Our Approach</a>
    		<ul class='children'>
    		<li class="cat-item cat-item-10"><a href="#" title="Our Beliefs">Our Beliefs</a>
    			<li class="cat-item cat-item-11"><a href="../htdocs/execution.html" title="Strategy, Design, and Execution">Strategy, Design, and Execution</a>
    			<li class="cat-item cat-item-12"><a href="../htdocs/simplebetter.html" title="The Simpler, the Better">The Simpler, the Better</a>
    			<li class="cat-item cat-item-13"><a href="../htdocs/devildetails.html" title="The Devil is in the Details">The Devil is in the Details</a>
    		<li class="cat-item cat-item-14"><a href="../htdocs/ba.html" title="The Business Architect">The Business Architect</a>
    		<li class="cat-item cat-item-15"><a href="../htdocs/processes.html" title="Your Processes">Your Processes</a>
    			<li class="cat-item cat-item-16"><a href="../htdocs/guidingprinciples.html" title="Guiding Principles">Guiding Principles</a>
    			<li class="cat-item cat-item-17"><a href="../htdocs/buildingblocksintro.html" title="Building Blocks">Building Blocks</a> 
    
    	<li class="cat-item cat-item-3"><a href="../htdocs/gettingstarted.html" title="Getting Started">Getting Started</a>
    	<li class="cat-item cat-item-4"><a href="../htdocs/services.html" title="Services">Services</a>
    	<li class="cat-item cat-item-5"><a href="../htdocs/mission.html" title="Mission"> Mission</a>
    	<li class="cat-item cat-item-6"><a href="../htdocs/aboutus.html" title="About Us">About Us</a>
    	<li class="cat-item cat-item-7"><a href="../htdocs/contactus.html" title="Contact Us">Contact Us</a> 
    
    	<div class="clr"></div>
    	</div>

    Two additional questions I'd really appreciate help on are:
    1. How do I change the overall styling on category items (e.g. all children)? I've seen comments stating "put them in the style sheet", but this works for some styling items, but not for all. I've now got styling in both the style sheet and the navigation bar CSS in attempts to style the items which I don't like.
    2. How do do I change styling on a specific category item? I understand I can create a CSS class specific to that category, but don't know how to format the CSS to do that and where and how to apply it. Meaning the list items currently refer to a class "li class="cat-item cat-item-6". Can I alter that class? If so, I don't know how to do that.

    I'm sorry I can't supply a URL to the site as I'm working on it locally only. I didn't see a way to upload an image to this post.

    I realize these are a lot of questions and would appreciate any and all help. I've got to have a demo running by Tuesday morning and feeling a bit panicked at the moment.

    Thanks very much,
    Diane

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    WordPress forums do not support commercial themes. As you purchased support whence you purchased the theme, you should seek help from your theme's vendors.

  3. DianeTB
    Member
    Posted 1 year ago #

    How sad to think a forum with experienced individuals would turn down a request for help that would make someone's life easier.

    The vendor's template works as advertised. I suspect I changed something to cause this issue and was hoping to get a better understanding how to properly manipulate WordPress functions.

    The vendor's forum does not supply support, again, my naivete in this arena.

    After experiencing hurricane Sandy on the east coast, I would have hoped a reaching hand would have been met in kind.

  4. DianeTB
    Member
    Posted 1 year ago #

    It appears this forum answered a gentleman's question. He was modifying the mango theme/template which per this link is purchased and licensed.

    http://themeforest.net/item/mango-slick-responsive-admin-template/2728748

    His question was answered just two days ago.

    http://wordpress.org/support/topic/menu-current-page-and-hover?replies=4

    Please clarify why he received forum support and I was refused?

    Thank you,

    Diane

  5. The vendor's forum does not supply support, again, my naivete in this arena.

    ... What on earth are they selling!?

    The reason we don't support commercial themes is that people who sell 'em generally support them. By providing free support, we undermine their ability to make money, which we feel is detrimental to the community. Basically, if you pay for something, the expectation is that it comes with support.

    What vendor is this that is not providing support for their product?

  6. DianeTB
    Member
    Posted 1 year ago #

    Thank you for clarifying. I was taken aback by the tone and assumption of the original response. "As you purchased support 'whence" you purchased the theme,".

    The site sells various templates - dreamtemplate.com. Their knowledge base and FAQ relate to how to download templates, etc. not WordPress, CSS issues, at least to my eye.

Topic Closed

This topic has been closed to new replies.

About this Topic