WordPress.org

Ready to get started?Download WordPress

Forums

Margin-top randomly being calculated differently (7 posts)

  1. john_bryan
    Member
    Posted 1 year ago #

    My wordpress theme has a menu bar along the top below the header image. Every once in a while, without any change to theme code, the menu will be positioned incorrectly. When it happens, it happens across the board and for no reason that I am able to figure out.

    here is the rule that positions it:

    #header {position:relative; z-index:9999; background:url('../includes/rgba.php?name=black&a=20'); background:rgba(46,124,192,1); border-top:1px solid rgba(0,0,0,0.8); border-bottom:1px solid rgba(0,0,0,0.8); margin-top:156px; heigh t: 32px; }

    Just a few weeks ago I had margin-top at 176px. The other day I had to change it to 156px in order for it to be positioned in the spot that it was before. I made absolutely no changes to the parent element in any way. What could be causing this? Thanks!

  2. David Choi
    Member
    Posted 1 year ago #

    Your site URL? Just looking into the posted code is not helpful, thanks.

  3. john_bryan
    Member
    Posted 1 year ago #

  4. David Choi
    Member
    Posted 1 year ago #

    I think the reason that is happening is that your header background image changes height or some javascript is affecting it some times applying the CSS styling somewhere. But I see that the header background image block is:

    <div class="showcase"> </div>

    And the main menu black is inside

    <div id="header" class="">

    Instead, try editing your theme's header and reposition the

    <div class="showcase"> </div>

    above the main menu block, and start fixing from there.

    <div class="wrapper">
        <div id="header" class="">
        <div class="headerFix"></div>
        <script type="text/javascript">
        <div class="showcase"> </div>
        <div id="container" style="overflow-x: hidden; width: 1598px;">
        <script>
        <script src="http://www.paliadventures.com/wp-content/themes/pali2013/js/crazyegg.js" type="text/javascript">
    </div>

    So they are stacked naturally in order, so you can avoid forcing the positioning using CSS top properly, because the design is quite simple, I don't see any reason to use "top" property for the main menu.

  5. john_bryan
    Member
    Posted 1 year ago #

    Ahh, that makes perfect sense, thanks. I didn't build the site so I never payed attention to the fact that the divs were placed in a strange order. I'll try it out on my dev site and see if that does the trick.

  6. john_bryan
    Member
    Posted 1 year ago #

    So after poking around, I realize that doing what you suggested is almost not worth it. The <div class="showcase"> is not in my header.php file. Instead the theme developer added it conditionally all over the functions.php file. The amount of time it would take to sort out this mess of spaghetti code in my functions.php file is not worth the occasional need to adjust. Thanks!

  7. David Choi
    Member
    Posted 1 year ago #

    Ah, I see. As long as it works for you, then it's perfect :)

Topic Closed

This topic has been closed to new replies.

About this Topic