Crystal Navigation Menu Button Is Transparent

Community Forums Forums General Discussion Crystal Navigation Menu Button Is Transparent

This topic is: resolved

This topic contains 12 replies, has 3 voices, and was last updated by  mbesh 4 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #95342

    mbesh
    Member
    Post count: 15

    Having a problem with the Crystal navigation menu in the “primary” location.

    Since I have more menu items than can fit on one “row”, it puts the remaining items in a second “row” below. But, when it does that, the button “background” is lost (transparent), with the site background showing ‘thru’.

    Since this is a ‘private’ site, a link to the site will not work—so here’s a screen grab of the problem:

    http://www.4vis.com/CrystalNavigationProblem.jpg

    Thanks for your help!

    Mark Besh
    Visual Impact Systems

    #95358

    emasai
    Participant
    Post count: 648

    No one can solve your problem from a screenshot. Not a solution to the particular problem, but why not put the navigation below the logo and just above Welcome that way everything would fit on one line, specially since you have drop down menus on the top level of your present navigation.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #95438

    mbesh
    Member
    Post count: 15

    Lynne,

    Thank you for your quick reply. We cannot give you access to the site since it is ‘protected’ from the public behind the firewall of a bank on their Intranet.

    We did suggest what you mentioned, but the bank management wants us to coordinate the ‘look’ of this new site with the couple of previously created sites we did for them.

    [ FYI: We added a bunch of menu items to one of the previous sites to make 3 'rows', and it had the same problem:
    http://www.4vis.com/CrystalNavigationProblem-3rows.jpg ]

    So, let me try to give you a bunch of info that will hopefully be what you need.

    ==================================================================================================

    - Using WordPress 3.6 and the latest Genesis (2.0.1)

    ==================================================================================================

    - INSTALLED PLUGINS:

    Calculated Fields Form
    Contact Form 7
    Dynamic Content Gallery
    Enable Media Replace
    Gecka Submenu
    Genesis Simple Sidebars
    Google Doc Embedder
    HTML5 Slideshow Presentations
    Jetpack by WordPress.com
    JW Player 6 Plugin for WordPress
    Multicons
    NextGEN Gallery by Photocrati
    Regenerate Thumbnails
    RSS Feeder
    Simple Tags
    Sitemap
    SlideShare Embeds
    Ultimate Tag Cloud Widget
    Vimeo Quicktags
    WordPress Database Backup
    WP-Cycle
    WP SlimStat Dashboard Widgets

    ==================================================================================================

    Seems that there is a character limit on these posts, so I will send a portion of the style.css in the next post.

    Mark

    #95440

    mbesh
    Member
    Post count: 15

    - STYLE.CSS (Only changed the padding on the menu ‘buttons’ to make them wider, and the title area width to make the area wider for the menu buttons)

    /***** Header ********************/

    #header {
    width: 960px;
    height: 120px;
    }

    #title-area {
    width: 250px;
    float: left;
    padding: 20px 0 0 0;
    overflow: hidden;
    }

    #title-area #title {
    font-size: 24px;
    font-weight: normal;
    line-height: 30px;
    margin: 0;
    padding: 0;
    }

    #title-area #title a, #title-area #title a:hover {
    color: #333333;
    text-decoration: none;
    }

    #title-area #description {
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    margin: 0;
    }

    #header .widget-area {
    width: 620px;
    float: right;
    padding: 10px 0 0 0;
    }

    #header .widget-area p {
    margin: 0;
    padding: 0 0 5px 0;
    }

    /***** Image Header – Partial Width ********************/

    .header-image #header #title-area {
    background: url(images/logo.png) left top no-repeat;
    }

    .header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
    display: block;
    float: left;
    width: 320px;
    height: 120px;
    padding: 0;
    text-indent: -9999px;
    overflow: hidden;
    }

    .header-image #title-area #description {
    display: block;
    overflow: hidden;
    }

    =============================================

    Navigation Menus code of the Style.css in next post…

    #95442

    mbesh
    Member
    Post count: 15

    /***** Navigation Menus ********************/

    #nav, #subnav {
    background: url(images/menu_bg.gif) repeat-x;
    width: 960px;
    color: #334366;
    margin: 0;
    overflow: hidden;
    clear: both;
    }

    #nav ul, #subnav ul, #header ul.nav, #header ul.menu {
    background: url(images/menu_bg.gif) repeat-x;
    float: left;
    margin: 0;
    padding: 0;
    border-left: 1px solid #E4E9ED;
    border-right: 1px solid #E4E9ED;
    }

    #nav li, #subnav li, #header ul.nav li, #header ul.menu li, #header ul.nav li {
    float: left;
    list-style: none;
    }

    #nav li a, #subnav li a, #header ul.nav li a, #header ul.menu li a {
    color: #334366;
    display: block;
    font-size: 12px;
    margin: 1px 0 0 0;
    padding: 11px 27px 9px 27px;
    text-decoration: none;
    text-shadow: #FFFFFF 1px 1px;
    position: relative;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #B8C6D1;
    }

    #nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item, #subnav li a:hover, #subnav li a:active, #subnav .current_page_item a, #subnav .current-cat a, #subnav .current-menu-item, #header ul.nav li a:hover, #header ul.nav li a:active, #header ul.nav .current_page_item a, #header ul.nav .current-cat a, #header ul.nav .current-menu-item a, #header ul.menu li a:hover, #header ul.menu li a:active, #header ul.menu .current_page_item a, #header ul.menu .current-cat a, #header ul.menu .current-menu-item a {
    background: url(images/menu_highlight.gif) repeat-x;
    color: #334366;
    }

    #nav li a.sf-with-ul, #subnav li a.sf-with-ul, #header ul.nav li a.sf-with-ul, #header ul.menu li a.sf-with-ul {
    padding-right: 35px;
    }

    #nav li a .sf-sub-indicator, #subnav li a .sf-sub-indicator, #header ul.nav li a .sf-sub-indicator, #header ul.menu li a .sf-sub-indicator {
    background: url(images/arrow-down.gif);
    display: block;
    width: 7px;
    height: 5px;
    top: 19px;
    right: 14px;
    text-indent: -9999px;
    overflow: hidden;
    position: absolute;
    }

    #nav li li a, #nav li li a:link, #nav li li a:visited, #subnav li li a, #subnav li li a:link, #subnav li li a:visited, #header ul.nav li li a, #header ul.nav li li a:link, #header ul.nav li li a:visited, #header ul.menu li li a, #header ul.menu li li a:link, #header ul.menu li li a:visited {
    background: url(images/menu_bg.gif) repeat-x;
    color: #334366;
    width: 170px;
    margin: 0;
    padding: 12px 30px 10px 20px;
    position: relative;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #B8C6D1;
    }

    #nav li li a:hover, #nav li li a:active, #subnav li li a:hover, #subnav li li a:active, #header ul.nav li li a:hover, #header ul.nav li li a:active, #header ul.menu li li a:hover, #header ul.menu li li a:active {
    background: url(images/menu_highlight.gif) repeat-x;
    color: #334366;
    padding: 11px 30px 9px 20px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #BCC9D2;
    }

    #nav li li a .sf-sub-indicator, #subnav li li a .sf-sub-indicator, #header ul.nav li li a .sf-sub-indicator, #header ul.menu li li a .sf-sub-indicator {
    width: 5px;
    height: 7px;
    background: url(images/arrow-right.gif);
    top: 19px;
    }

    #nav li ul, #subnav li ul, #header ul.nav li ul, #header ul.menu li ul {
    width: 190px;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    margin: 0;
    padding: 0;
    }

    #nav li ul a, #subnav li ul a, #header ul.nav li ul a, #header ul.menu li ul a {
    width: 140px;
    }

    #nav li ul ul, #subnav li ul ul, #header ul.nav li ul ul, #header ul.menu li ul ul {
    margin: -42px 0 0 190px;
    padding: 0;
    }

    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul, #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfHover ul ul, #subnav li.sfHover ul ul ul, #header ul.nav li:hover ul ul, #header ul.nav li:hover ul ul ul, #header ul.nav li.sfHover ul ul, #header ul.nav li.sfHover ul ul ul, #header ul.menu li:hover ul ul, #header ul.menu li:hover ul ul ul, #header ul.menu li.sfHover ul ul, #header ul.menu li.sfHover ul ul ul {
    left: -999em;
    }

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfHover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul, #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfHover ul, #subnav li li.sfHover ul, #subnav li li li.sfHover ul, #header ul.nav li:hover ul, #header ul.nav li li:hover ul, #header ul.nav li li li:hover ul, #header ul.nav li.sfHover ul, #header ul.nav li li.sfHover ul, #header ul.nav li li li.sfHover ul, #header ul.menu li:hover ul, #header ul.menu li li:hover ul, #header ul.menu li li li:hover ul, #header ul.menu li.sfHover ul, #header ul.menu li li.sfHover ul, #header ul.menu li li li.sfHover ul {
    left: auto;
    }

    #nav li:hover, #nav li.sfHover, #subnav li:hover, #subnav li.sfHover, #header ul.nav li:hover, #header ul.nav li.sfHover, #header ul.menu li:hover, #header ul.menu li.sfHover {
    position: static;
    }

    /***** Primary Navigation Extras ********************/

    #nav li.right {
    float: right;
    margin: 0;
    padding: 7px 10px 5px 10px;
    }

    #nav li.right a {
    background: none;
    display: inline;
    color: #FFFFFF;
    font-weight: normal;
    text-decoration: none;
    border: none;
    }

    #nav li.right a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    }

    #nav li.search {
    padding: 0 10px 0 10px;
    }

    #nav li.rss a, #nav li.rss a:hover {
    background: url(images/rss.png) no-repeat left center;
    margin: 0 0 0 10px;
    padding: 7px 0 5px 16px;
    }

    #nav li.twitter a, #nav li.twitter a:hover {
    background: url(images/twitter-nav.png) no-repeat left center;
    padding: 7px 0 5px 20px;
    }

    #nav li.rss a:hover, #nav li.twitter a:hover {
    text-decoration: underline;
    }

    /***** Inner ********************/

    #inner {
    width: 960px;
    margin: 20px 0 20px 0;
    }

    .home #inner {
    width: 960px;
    margin: 0 0 20px 0;
    }

    /***** Breadcrumb ********************/

    .breadcrumb {
    color: #6C7996;
    font-size: 11px;
    margin: 0 0 30px 0;
    padding: 10px 0px 10px 0px;
    border-bottom: 1px dotted #DBDEE4;
    }

    /***** Taxonomy Description ********************/

    #95446

    mbesh
    Member
    Post count: 15

    - FUNCTIONS.PHP (Only added customized credits)

    - DID NOT change home.php or page.portfolio.php

    Need anything else from me?

    Thank you for your time and effort on this!

    Mark Besh
    Visual Impact Systems

    #95430

    mbesh
    Member
    Post count: 15

    Emasai,

    Thank you for your quick reply. We cannot give you access to the site since it is ‘protected’ from the public behind the firewall of a bank on their Intranet.

    We did suggest what you mentioned, but the bank management wants us to coordinate the ‘look’ of this new site with the couple of previously created sites we did for them.

    [ FYI: We added a bunch of menu items to one of the previous sites to make 3 'rows', and it had the same problem:
    http://www.4vis.com/CrystalNavigationProblem-3rows.jpg ]

    So, let me try to give you a bunch of info that will hopefully be what you need.

    ==================================================================================================

    - Using WordPress 3.6 and the latest Genesis (2.0.1)

    ==================================================================================================

    - INSTALLED PLUGINS:

    Calculated Fields Form
    Contact Form 7
    Dynamic Content Gallery
    Enable Media Replace
    Gecka Submenu
    Genesis Simple Sidebars
    Google Doc Embedder
    HTML5 Slideshow Presentations
    Jetpack by WordPress.com
    JW Player 6 Plugin for WordPress
    Multicons
    NextGEN Gallery by Photocrati
    Regenerate Thumbnails
    RSS Feeder
    Simple Tags
    Sitemap
    SlideShare Embeds
    Ultimate Tag Cloud Widget
    Vimeo Quicktags
    WordPress Database Backup
    WP-Cycle
    WP SlimStat Dashboard Widgets

    ==================================================================================================

    - STYLE.CSS (Only changed the padding on the menu ‘buttons’ to make them wider, and the title area width to make the area wider for the menu buttons)

    /*
    Theme Name: Crystal Child Theme
    Theme URL: http://www.studiopress.com/themes/crystal
    Description: Crystal is a 2 or 3-column Widget-ready child theme created for the Genesis Framework.
    Author: StudioPress
    Author URI: http://www.studiopress.com
    Version: 1.0

    [Edited - please post a link to the css file, not the entire contents.]

    ==========================================

    - FUNCTIONS.PHP (Only added customized credits)

    <?php
    // Start the engine
    require_once(TEMPLATEPATH.’/lib/init.php’);

    // Child theme (do not remove)
    define(‘CHILD_THEME_NAME’, ‘Crystal Theme’);
    define(‘CHILD_THEME_URL’, ‘http://www.studiopress.com/themes/crystal’);

    // Add new image sizes
    add_image_size(‘Home Bottom’, 65, 65, TRUE);
    add_image_size(‘Home Thumbnail’, 175, 125, TRUE);
    add_image_size(‘Portfolio Thumbnail’, 200, 130, TRUE);
    add_image_size(‘Portfolio Full’, 600, 300, TRUE);

    // Change avatar size
    add_filter(‘genesis_comment_list_args’, ‘child_comment_list_args’);
    function child_comment_list_args($args) {
    $args = array(
    ‘type’ => ‘comment’,
    ‘avatar_size’ => 33,
    ‘callback’ => ‘genesis_comment_callback’
    );
    return $args;
    }

    // Add sidebar divs
    add_action(‘genesis_before_sidebar_widget_area’, ‘child_before_sidebar_widget_area’);
    function child_before_sidebar_widget_area() {
    ?><div id=”sidebar-top”></div><?php
    }
    add_action(‘genesis_after_sidebar_widget_area’, ‘child_after_sidebar_widget_area’);
    function child_after_sidebar_widget_area() {
    ?><div id=”sidebar-bottom”></div><?php
    }

    // Customize the footer section
    add_filter(‘genesis_footer_creds_text’, ‘crystal_footer_creds_text’);
    function crystal_footer_creds_text($creds) {
    return __(‘Copyright’, ‘genesis’) . ‘ [footer_copyright] [footer_childtheme_link] ‘ . __(‘on’, ‘crystal’) . ‘ [footer_genesis_link] · [footer_wordpress_link] · [footer_loginout]‘;
    }

    // Add Crystal theme settings to Genesis default theme settings
    add_filter(‘genesis_theme_settings_defaults’, ‘crystal_theme_settings’);
    function crystal_theme_settings( $defaults ) {
    $defaults['crystal_portfolio_content'] = ‘excerpts’;
    return $defaults;
    }

    // Add Portfolio Settings box to Genesis Theme Settings
    add_action(‘admin_menu’, ‘crystal_add_portfolio_settings_box’, 11);
    function crystal_add_portfolio_settings_box() {
    global $_genesis_theme_settings_pagehook;

    add_meta_box(‘genesis-theme-settings-crystal-portfolio’, __(‘Portfolio Page Settings’, ‘crystal’), ‘crystal_theme_settings_portfolio’, $_genesis_theme_settings_pagehook, ‘column2′);
    }

    function crystal_theme_settings_portfolio() {
    ?>
    <p><?php _e(“Display which category:”, ‘genesis’); ?>
    <?php wp_dropdown_categories(array(‘selected’ => genesis_get_option(‘crystal_portfolio_cat’), ‘name’ => GENESIS_SETTINGS_FIELD.’[crystal_portfolio_cat]‘, ‘orderby’ => ‘Name’ , ‘hierarchical’ => 1, ‘show_option_all’ => __(“All Categories”, ‘genesis’), ‘hide_empty’ => ’0′ )); ?></p>

    <p><?php _e(“Exclude the following Category IDs:”, ‘genesis’); ?><br />
    <input type=”text” name=”<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_cat_exclude]” value=”<?php echo esc_attr( genesis_get_option(‘crystal_portfolio_cat_exclude’) ); ?>” size=”40″ /><br />
    <small><?php _e(“Comma separated – 1,2,3 for example”, ‘genesis’); ?></small></p>

    <p><?php _e(‘Number of Posts to Show’, ‘genesis’); ?>:
    <input type=”text” name=”<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_cat_num]” value=”<?php echo esc_attr( genesis_option(‘crystal_portfolio_cat_num’) ); ?>” size=”2″ /></p>

    <p><span class=”description”><?php _e(‘<b>NOTE:</b> The Portfolio Page displays the “Portfolio Page” image size plus the excerpt or full content as selected below.’, ‘crystal’); ?></span></p>

    <p><?php _e(“Select one of the following:”, ‘genesis’); ?>
    <select name=”<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content]“>
    <option style=”padding-right:10px;” value=”full” <?php selected(‘full’, genesis_get_option(‘crystal_portfolio_content’)); ?>><?php _e(“Display post content”, ‘genesis’); ?></option>
    <option style=”padding-right:10px;” value=”excerpts” <?php selected(‘excerpts’, genesis_get_option(‘crystal_portfolio_content’)); ?>><?php _e(“Display post excerpts”, ‘genesis’); ?></option>
    </select></p>

    <p><label for=”<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content_archive_limit]“><?php _e(‘Limit content to’, ‘genesis’); ?></label> <input type=”text” name=”<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content_archive_limit]” id=”<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content_archive_limit]” value=”<?php echo esc_attr( genesis_option(‘crystal_portfolio_content_archive_limit’) ); ?>” size=”3″ /> <label for=”<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content_archive_limit]“><?php _e(‘characters’, ‘genesis’); ?></label></p>

    <p><span class=”description”><?php _e(‘<b>NOTE:</b> Using this option will limit the text and strip all formatting from the text displayed. To use this option, choose “Display post content” in the select box above.’, ‘genesis’); ?></span></p>
    <?php
    }

    // Register widget areas
    genesis_register_sidebar(array(
    ‘name’=>’Home Top Left’,
    ‘id’ => ‘home-top-left’,
    ‘description’ => ‘This is the top left section of the homepage.’
    ));
    genesis_register_sidebar(array(
    ‘name’=>’Home Top Right’,
    ‘id’ => ‘home-top-right’,
    ‘description’ => ‘This is the top right section of the homepage.’
    ));
    genesis_register_sidebar(array(
    ‘name’=>’Home Middle’,
    ‘id’ => ‘home-middle’,
    ‘description’ => ‘This is the first column of the middle section of the homepage.’
    ));
    genesis_register_sidebar(array(
    ‘name’=>’Home Bottom #1′,
    ‘id’ => ‘home-bottom-1′,
    ‘description’ => ‘This is the first column of the bottom section of the homepage.’
    ));
    genesis_register_sidebar(array(
    ‘name’=>’Home Bottom #2′,
    ‘id’ => ‘home-bottom-2′,
    ‘description’ => ‘This is the second column of the bottom section of the homepage.’
    ));
    genesis_register_sidebar(array(
    ‘name’=>’Home Bottom #3′,
    ‘id’ => ‘home-bottom-3′,
    ‘description’ => ‘This is the third column of the bottom section of the homepage.’
    ));
    /** Customize the credits */
    add_filter(‘genesis_footer_creds_text’, ‘custom_footer_creds_text’);
    function custom_footer_creds_text($creds) {
    $creds = ‘Copyright © MSGCU | THE CONNECTION | Website Design By: VISUAL IMPACT SYSTEMS | SITEMAP |
    [footer_loginout redirect="http://ldr-rc-msgcu.org/wp-admin/"]‘;
    return $creds;

    }

    ==================================================================================================

    - DID NOT change home.php or page.portfolio.php

    ==================================================================================================

    Need anything else from me?

    Thank you for your time and effort on this!

    Mark Besh
    Visual Impact Systems

    #95771

    mbesh
    Member
    Post count: 15

    Can someone help me with this? Did I supply enough info?

    Mark Besh

    #95781

    braddalton
    Participant
    Post count: 8868

    You can extend the width of the header right widget area and reduce the logo title area or use another menu location like primary or secondary.

    That theme is fairly old so you might consider updating to a Pro theme.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #95782

    mbesh
    Member
    Post count: 15

    Brad,

    Thanks for the quick reply.

    As I mentioned, we are ‘coordinating’ this site with a half-dozen other sites that are using the Crystal theme (they would like all of them to look alike—with the menu in the upper right of the header)—and this is the only one that has more menu items than can be in one row.

    So, there’s nothing I can do to ‘apply’ the background image to these ‘buttons’?

    Think it would it be possible to put two separate menus up there—one above another?

    Thanks for your help!

    Mark

    #95794

    braddalton
    Participant
    Post count: 8868

    Try adding 2 custom menus to the header right widget area. Not sure why you lose the background image as that shouldn’t happen.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #95801

    mbesh
    Member
    Post count: 15

    Brad,

    Yep, that worked!

    Q: How can I put a few pixels of space between them? (below the top one to ‘push’ the bottom one down a bit)

    Mark

    #95805

    mbesh
    Member
    Post count: 15

    Brad,

    I did it the ‘cheater’ way.

    Put a text widget between them and put a ‘period’ in there and made it the background color. Then I made it smaller in size and line spacing to control the space between them:

    <p style=”font-size:9px; color:#e9eef7; line-height:50%”>.</p>

    Thanks for your very responsive help on this!

    Mark Besh
    Visual Impact Systems

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.