WordPress.org

Ready to get started?Download WordPress

Forums

Simple Catch
[resolved] Highlighted Current Menu & Empty Nav Space (16 posts)

  1. BigTuna5000
    Member
    Posted 1 year ago #

    Hello and thank you in advance to those who regularly answer questions about this particular theme. I've been able to solved a number of problems by referring to old topics on here but I need further assistance with the simple catch navigation/menu.

    I'd like to know how I can get the current page highlighted in the navigation. I noticed that the home page and actual pages in the menu will stay lit up in black but the article type pages wont.

    I think this is the code that highlights the home page or index.html (if it exists inside all this php) but the "current_page_item" code must not cover the additional article list/blog pages in the menu.

    #header #mainmenu ul li a:hover, #header #mainmenu ul li.current_page_item a, #header #mainmenu ul li:hover > a {
    background-color: #444;
    color: #fff;
    }

    Another concern of mine was the menu item in the navigation overflowing into a second row in a different browser due to font-style interpretation. I tried changing the font to pt rather than px but I didn't have any luck. I'd like to make it so the navigation is fixed and takes up all 976px but have the menu items be fluid when it comes to padding. I don't know what code block would need change or if this can even be done in css but here is something related -

    #header #mainmenu ul li a {
    padding: 0 15px;
    display: block;
    color: #fff;
    font-size: 17px;
    line-height: 38px;
    color: #444;
    float: left;
    }

    Thanks!

    http://wordpress.org/extend/themes/simple-catch/

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Have you a Child Theme or Custom Style plugin?

  3. BigTuna5000
    Member
    Posted 1 year ago #

    Andrew,

    I'm not sure exactly what your referring to but I have the simple catch theme version 1.3.4 and no navigation plugins. No css plugins either, just adding/editing css in the theme options>custom css styles.

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    That Custom CSS styles section sounds like it'll do the job.

    May you provide a link to your web page, or Pastebin.com of your CSS and HTML code for the relevant page?

  5. BigTuna5000
    Member
    Posted 1 year ago #

    Sorry, I've taken down my web address which was once in this post (for those of you looking at this after it's been solved).

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Try adding this CSS;

    #header #mainmenu ul li.current-menu-item a {
     background-color: #444;
     color: white;
    }
  7. BigTuna5000
    Member
    Posted 1 year ago #

    Works!!! Thanks a bunch! I was trying to figure that one out for an hour or so before posting here but I guess that's a php function or something (current-menu-item)? Not sure, I've only made plain jane html/css pages before.
    Now if I can just get rid of that white space to the left in the navigation without it overflowing to the next line.

  8. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    .current-menu-item is generated for each current menu item, from the wp_nav_menu() function.

    Previously the CSS was referring to .current_page_item which is not generated for each current menu item.

  9. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Do you mean to rid the white space, right of the navigation?

  10. BigTuna5000
    Member
    Posted 1 year ago #

    Right, my other left. (yes i did)

    I was trying to figure out if there is a way to make the nav width fixed but the menu item's fluid within it.

  11. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    I don't know how to address the fixed width query, but for the extra space :
    You could apply a class to the last element, using jQuery, then set that last element to have border-right: 0;.

    Have you access to footer.php?

  12. BigTuna5000
    Member
    Posted 1 year ago #

    I've never used jquery before but I'm open to this as a solution.

    I do have access....

    <?php
    /**
    * The template for displaying the footer.
    *
    * @package Catch Themes
    * @subpackage Simple_Catch
    * @since Simple Catch 1.0
    */
    ?>
    <div id="footer">
    <div class="layout-978">
    <?php //Displaying footer logo ?>
    <div class="col7 copyright no-margin-left">
    <?php if( function_exists( 'simplecatch_footerlogo' ) ) :
    simplecatch_footerlogo();
    endif;
    ?><?php _e( 'Copyright', 'simplecatch' ); ?> © <?php echo date("Y"); ?> <span><?php bloginfo('name')?></span>. <?php _e( 'All Right Reserved.', 'simplecatch' ); ?>
    </div><!-- .col7 -->

    <?php do_action( 'simplecatch_credits' ); ?>

    </div><!-- .layout-978 -->
    </div><!-- #footer -->
    <?php wp_footer(); ?>
    </body>
    </html>

  13. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Actually nevermind, that would require you to create a Child Theme.
    I suppose for now, you can just use the CSS last-child selector;

    #header #mainmenu ul li:last {
     border-right: 0;
    }
  14. BigTuna5000
    Member
    Posted 1 year ago #

    Sorry, it didn't seem to have an effect on it.

  15. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Oops use this

    #header #mainmenu ul li:last-child {
     border-right: 0;
    }
  16. BigTuna5000
    Member
    Posted 1 year ago #

    Works! Thanks! I think it looks a lot better without the border and now it wont appear to be different lengths depending on the browser.

    This is my first thread on the word press forum but I'd like to stick around and try to answer some newbie questions to broaden my scope. I'd like to learn how to create a mysql/php database visitors on my site can search. Anyways, you've been a great help, thanks!

    -Andrew (too)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic