Skip navigation
Currently Being Moderated

Navigation bar floating, can't seem to position to top

Mar 3, 2013 7:38 PM

Could use a second set of eyes. Bought a theme template and did some adjustments in DW. For the life of me, I cannot figure out why the navigation bar - "top_bar" - is floating. it should be positioned at the top of the page. The footer also seems to be floating.

 

http://kaufmanphotography.com/kp-weddings/

 

Not sure if this is a css or php issue. I can deal with css, php is a little tougher on me. Guidance would ure be appreciated.

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Mar 3, 2013 7:52 PM   in reply to lovehhi

    What browser are you seeing the problem with? I'm seeing the navigation bar at the top of the page on Firefox 19, IE 10, and Chrome 24.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 8:06 PM   in reply to lovehhi

    Since this a Premium Wordpress Theme, your best bet is to log in to the Themeforest website and get support direct from the author of the Theme.

    http://themeforest.net/item/core-minimalist-photography-portfolio/2401 85

     

    Whenever this Theme is updated and you download the update, you will wipe out any edits you've made to the core files in the Theme.

     

    Thus, any adjustments to Wordpress Themes are best done via a Child Theme

    http://codex.wordpress.org/Child_Themes

    http://themeshaper.com/modify-wordpress-themes/

     

    Then, when you update the Theme, you get the benefit of the updated core files (new features, php tweaks etc) and your edits (usually CSS formatting changes) remain intact in the Child Theme which trump the core Theme files.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 9:19 AM   in reply to lovehhi

    The problem seems to happen not because of Supersized plugin, but because of the responsive media-query CSS on the site.

     

    Maybe the theme that you bought didn't have as many as links as you have now?

     

    grid.css that controls your media-query - check for widths on #top_bar. Default width is 100%, while tablet and phone layouts suggest a fixed 'px' width. Plus, your logo and menu items are not re-sizing or re-aligning, causing this div to break apart.

     

    Other than that, at full-size desktop view, the header seems just fine to me.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 9:26 AM   in reply to lovehhi

    Welcome to WordPress hell.    I share your pain.

     

    This is one of the reasons I'm loath to use WP anymore.  The plain truth is that some Themes are better than others.  Some plugins work best with some themes and not others.  Finding the right combination of WP ver, Theme and Plugins is often a frustrating & time consuming process.

     

    I've had situations where my Theme performed just fine with one ver of WP and suddenly stopped working when WP was upgraded.  Or the plugins stopped working.  Or all three stopped working.  WP development requires  much trial & error testing, tenacity and a few stiff drinks.

     

    Good luck!

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 9:28 AM   in reply to Nancy O.

    and a few stiff drinks.

    +1

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 10:14 AM   in reply to lovehhi

    The desktop rules are taken from a different CSS file - that shouldn't be a concern. Like I mentioned to you, the width factor for top_bar in grid.css for tablets and mobiles is fixed to a pixel value while you could try making it 100%.

     

    My answer to your question on Joomla - you should understand that all CMS platforms have their own pros and cons.

     

    If you're considering Joomla, there are many others you could consider. The top 3 being:

     

    • Drupal
    • Concrete5
    • OpenCMS
     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 10:40 AM   in reply to lovehhi

    Well. Can you possibly post a screenshot of what you're seeing on your 'desktop' that you say your top_bar is 'floating'? Maybe we're talking 2 different contexts here? Just want to be sure that we're in sync.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 10:56 AM   in reply to Sudarshan Thiagarajan

    Can you possibly post a screenshot of what you're seeing on your 'desktop' that you say your top_bar is 'floating'? Maybe we're talking 2 different contexts here? Just want to be sure that we're in sync.

    That would help.

     

    I've read and re-read this thread but unfortunately I'm still not clear on what the issue is that we're trying to solve.

     

    @lovehhi: Can you give us a few steps to follow in which browser(s) and expected vs actual results?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 11:49 AM   in reply to lovehhi

    For the thumbnails, supersized.css, line 67:

     

    #thumb-tray{ background:#fff; position:fixed; z-index:3; bottom: 0px; right:0; background: transparent; padding-top: 8px; height:80px; width:100%; overflow:hidden; text-align:center; }

    Change the highlighted bottom value to 0px from 3px.

     

    The header looks just fine here on Chrome 25.0.

     

    I notice your screenshot - the header section has a different logo than what is shown on your actual page now?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 11:58 AM   in reply to lovehhi

    Can you re-upload your logo on the live page? So we can see exactly what you're seeing?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 12:02 PM   in reply to lovehhi

    If you put your URL into this Responsive Design Tester, you can see multiple widths in one page.

    http://mattkersley.com/responsive/

     

    Which width is your problem one?

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 12:04 PM   in reply to lovehhi

    Cool.

     

    The top_bar. I looked up on your 'current' site (kaufmanphotography.com) and took the image link for your logo from there and tried it on your 'Core' theme page. It looks just fine to me.

     

    Screen Shot 2013-03-05 at 1.33.16 AM.png

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 12:06 PM   in reply to Nancy O.

    @Nancy, on a sidenote, 2 more great responsive testers:

     

    • responsive.is
    • responsinator.com
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 12:09 PM   in reply to lovehhi

    lovehhi wrote:

     

    John...the way in which you phrased your questions makes it difficult for me to understand what you are asking.

    Sorry about that. Thought I was being clear. No more than what Sudarshan was asking you for.

     

    Glad you've now got it sorted.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 12:14 PM   in reply to lovehhi

    I see you've changed the logo.

     

    It still seems fine to me on a desktop view.

     

    However, something I did notice is on mobile/ tablet view, the top_bar is clumsy - like I pointed out in my reply #4.

     

    Screen Shot 2013-03-05 at 1.39.59 AM.png

     

    Screen Shot 2013-03-05 at 1.39.48 AM.png

     

    These have to be fixed in grid.css (top_bar). Like I said, there is a fixed width for top_bar there. However, you should keep in mind the media-query is defined as min-width:480px; upto lets say 700px where it hits the 'tablet' CSS. But, in that rule, if your top_bar has a fixed width of 480px; even if you're on 699px, the top_bar will only cover 480px meaning the remaining 200 odd pixels will be blank, thereby causing this problem. Comprende?!

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 12:17 PM   in reply to lovehhi

    I cleared my cache

    It is the simplest things that we tend to overlook most times!

     

    You're welcome.

     

    But, do take a look at my reply #23 and you may want to get those 2 media-queries glitches solved to give a seamless experience for your mobile/ tablet users!

     

    Good luck and happy learning!

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 12:42 PM   in reply to lovehhi

    Change top_bar, width to 100% in these lines in grid.css:

     

    • Line 10
    • Line 125
    • Line 55

     

    Line 108 of grid.css:

     

    #menu_border_wrapper select { display: inline-block; float: right; margin-top: 10px; }

    remove the highlighted rule. this will center the dropdown menu on mobiles.

     

    Line 109 of grid.css:

     

    .logo_wrapper { margin-top: 10px; }

    Change that to:

     

    .logo_wrapper { width: 100%; text-align: center; }

     

    Line 178 of grid.css:

     

    #menu_border_wrapper select { display: inline-block; float: right; margin-top: 10px; }

    Remove the highlighted line to center the dropdown on landscape mobiles.

     

    Line 8 of grid.css:

     

    .logo_wrapper { margin: 28px 40px 0 20px; }

     

    Change that to:

     

    .logo_wrapper { width: 100%; text-align: center; margin: 28px 40px 0 20px; }

     

    for centering logo on tablets.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 12:52 PM   in reply to lovehhi

    Yes, stroked out words imply remove them from your code.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 12:52 PM   in reply to lovehhi

    You can duplicate/ backup the current grid.css file if you choose to (just in case).

     

    But, make the changes to grid.css file itself.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 1:04 PM   in reply to lovehhi

    Line 125 of grid.css:

     

    #top_bar { width: 100%; height: auto; margin: auto; float: none; }

     

    Remove the highlighted rule.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 1:30 PM   in reply to lovehhi

    Instead of that, try this:

     

    Line 125 of grid.css:

     

    #top_bar { width: 100%; height: auto; margin: auto; background-color: rgba(255, 255, 255, 0.8); }

    This will make the top_bar 80% white in color so the image at the back will be visible.

     

    Also, give a line break after previous line and add this just after that:

     

    #thumb-tray{visibility:hidden;}

     

    This will hide the thumbnail trail on a mobile landscape scren.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 1:41 PM   in reply to lovehhi

    After #top_bar

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points