WordPress.org

Ready to get started?Download WordPress

Forums

Oenology
[resolved] tinynav overlapping logo (12 posts)

  1. jknetdesign
    Member
    Posted 1 year ago #

    On a mobile device the tinynav class overlaps the logo. What class do I edit in the media query to add a top margin to the header to give space below the nav?

    http://growersice.com/

  2. crgeary
    Member
    Posted 1 year ago #

    Can you provide a screenshot? The navigation doesn't seem to be a problem for me? What I have noticed though is your logo disappears of the right edge of page..

    Logo Fix:

    /* This was center top, but should be right top */
    #header { background:url( .. ) no-repeat right top; }
  3. jknetdesign
    Member
    Posted 1 year ago #

    Tried that but didn't work.

    Should I bring the media queries into my child's style sheet?

  4. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 1 year ago #

    When you say "logo", do you mean the custom header image?

    The custom header image is implemented as a background image for the header div, and is intended to be behind the menus and site header text.

  5. jknetdesign
    Member
    Posted 1 year ago #

    IS there a way to adjust the position of it with media-query so it looks better on iPhone?

  6. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 1 year ago #

    You would have to change the location of the wp_nav_menu() call in the header.

  7. jknetdesign
    Member
    Posted 1 year ago #

    Okay, do you have any more info? Do I edit header.php or site-header.php? I don't see wp_nav_menu() in either of these files.

  8. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 1 year ago #

    Try site-navigation.php.

    header.php loads site-header.php, and site-header.php loads site-navigation.php, either before or after the site name/description (based on Theme option setting).

  9. jknetdesign
    Member
    Posted 1 year ago #

    Right, that's 3 different files with code that loads different components. What block of code from what file do I arrange in order to expose the entire header on the iPhone?

  10. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 1 year ago #

    One idea:

    1. Via Dashboard -> Appearance -> Oenology Options -> General Tab, set "Header Nav Menu Position" to Do Not Display.

    Then, hook the site navigation template-part file into either of the following hooks:

    - enology_hook_site_header_before
    - enology_hook_site_header_before

    For instance, if you want the menu to appear above the header image:

    function jknetdesign_site_navigation_hook() {
        get_template_part( 'site-navigation' );
    }
    add_action( 'enology_hook_site_header_before', 'jknetdesign_site_navigation_hook' );

    Note that you may need to adjust CSS rules to accommodate whatever change you make.

  11. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 1 year ago #

    Er, copy-paste error:

    The hooks are:

    - oenology_hook_site_header_before
    - oenology_hook_site_header_before

    function jknetdesign_site_navigation_hook() {
        get_template_part( 'site-navigation' );
    }
    add_action( 'oenology_hook_site_header_before', 'jknetdesign_site_navigation_hook' );
  12. jknetdesign
    Member
    Posted 1 year ago #

    Thanks again. It works very nicely!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic