1 2 Previous Next 40 Replies Latest reply: Mar 4, 2013 1:56 PM by sudarshan.t RSS

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

    lovehhi Community Member

      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.

        • 1. Re: Navigation bar floating, can't seem to position to top
          Web Magi Community Member

          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.

          • 2. Re: Navigation bar floating, can't seem to position to top
            John Waller MVP

            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/240185

             

            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.

            • 3. Re: Navigation bar floating, can't seem to position to top
              lovehhi Community Member

              Gee, hadn't thought to get support from the original designer of the theme...

               

              Sorry...I am so unbelieveably frustrated at this point after putting 2 weeks of nonstop queries into this issue. I sincerely do appreciate your guidance and the time you took to gather the info above, however my issue is that I cannot get my "premium" designer to respond to my requests for assistance. He did at first by saying it looks fine to him and that was it. I've even emailed access to my wordpress site for his assistance and heard nothing back. 

               

              I first directed my need for support to the designer, then I researched via google, then I reqested support of DW forum once before, then I requested support in WP forums, then I went back to sleuthing the issue via another round of Google queries.

               

              I've taken everything down, I've rebuilt everything, I've gotten rid of plugins, I've reviewed inside various browsers, I've adjusted via child theme and also brought everything local into my DW to review instances wherein the bar is floating, but to no avail..

               

              What I am not is a PHP maven and I think therein lies my issue. If it is css, I am not seeing it and I have played around extensively with a child theme, which is how this theme is set up.

               

              The main style sheet is screen.css. The child theme is style.css. They are playing around properly with each other as I have made some updates. There are 6 other css files, one of which effects the "supersized" full screen viewer which I feel has some issue in this as the floating top bar only occurs when I activate that particular gallery.

               

              I promise you, I have done my homework to this end. I need someone who is willing to get messy into the coding with me.

              • 4. Re: Navigation bar floating, can't seem to position to top
                sudarshan.t Community Member

                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.

                • 5. Re: Navigation bar floating, can't seem to position to top
                  Nancy O. MVP

                  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.

                  • 6. Re: Navigation bar floating, can't seem to position to top
                    sudarshan.t Community Member

                    and a few stiff drinks.

                    +1

                    • 7. Re: Navigation bar floating, can't seem to position to top
                      lovehhi Community Member

                      I've been doing the drinking part...believe me!

                       

                      Here is the grid.css code. It seems only directed to the tablets, etc...which is maybe what you were saying...or is there supposed to be something in there directed at the full page site and it is missing?

                       

                      /*

                      #Tablet (Portrait)

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

                      */

                       

                       

                      @media only screen and (min-width: 768px) and (max-width: 960px) {

                                .social_wrapper { width: 766px; }

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

                                #wrapper { width: 100%; margin: auto; }

                                #top_bar { width: 766px; margin: auto; }

                                .tagline { width: 706px; }

                                .top_right, #slider_wrapper { display:none; }

                                .page_caption, #page_content_wrapper { width: 726px; margin: auto; }

                                .nivoSlider { width: 766px; }

                                .nivoSlider img { width: 766px; }

                                .nivo-controlNav { width: 766px; }

                                .standard_wrapper.small { width: 726px; }

                                input[type="submit"].medium, input[type="button"].medium, a.button.medium { font-size: 14px; padding: .65em 1.4em .65em 1.4em; }

                                #footer { width: 766px; }

                                #footer ul.sidebar_widget { width: 726px; }

                                #copyright { width: 766px; }

                                .copyright_wrapper { width: 726px; }

                                .copyright_wrapper .left_wrapper { width: 450px; }

                                .copyright_wrapper .right_wrapper { width: 200px; }

                       

                                #page_content_wrapper .inner { width: 726px; margin: auto; }

                                .caption_inner { width: 726px; }

                                .standard_wrapper { width: 726px; }

                       

                                #content_wrapper .inner .inner_wrapper img { max-width: 100%; }

                       

                                #content_wrapper .inner .inner_wrapper .sidebar_wrapper, #page_content_wrapper .inner .sidebar_wrapper .sidebar, #page_content_wrapper .inner .sidebar_wrapper  { width: 190px;}

                                #content_wrapper .inner .inner_wrapper .sidebar_content { width: 520px; }

                                #content_wrapper .inner .inner_wrapper .sidebar_content img, #content_wrapper .inner .inner_wrapper .sidebar_content iframe, #content_wrapper .inner .inner_wrapper .sidebar_content div, #page_content_wrapper .inner .sidebar_content, #page_content_wrapper .inner .sidebar_content img, #page_content_wrapper .inner .sidebar_content iframe, #page_content_wrapper .inner .sidebar_content div { max-width: 500px; height: auto; }

                       

                                .comment .right { width: 79.5%; }

                                ul.children div.comment .right { width: 64.5%; }

                                #content_wrapper ul.children ul.children, #page_content_wrapper ul.children { width: 104%; }

                                #menu_border_wrapper select { display: none; }

                                .post_social { margin-top: 20px; }

                      }

                       

                       

                      /* 

                      #Mobile (Portrait)

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

                      */

                       

                       

                      @media only screen and (max-width: 767px) {

                                .top_right, #slider_wrapper { display:none; }

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

                          .social_wrapper { width: 318px; }

                                #wrapper { width: 100%; margin: auto; }

                                .page_caption, #page_content_wrapper { width: 290px; margin: auto; margin-top: 25px; }

                                .page_caption { width: 298px; }

                                #top_bar { width: 318px; height: auto; margin: auto; }

                                #slider_wrapper { width: 318px; height: 132px; margin-top: 37px; }

                                .nivoSlider { width: 318px; }

                                .nivoSlider img { width: 318px; }

                                .nivo-controlNav { width: 318px; }

                                .standard_wrapper.small { width: 290px; }

                                #footer { width: 318px; margin: auto; display: none; }

                                #footer ul.sidebar_widget { width: 290px; }

                                #copyright { width: 318px; }

                                .copyright_wrapper { width: 290px; }

                                .copyright_wrapper .left_wrapper { float: left; width: 100%; }

                                .copyright_wrapper .right_wrapper { float: left; width: 100%; text-align: left; }

                                #footer ul li.widget, #footer ul li.widget.last { float: left; width: 100%; }

                       

                                #content_wrapper { margin-top: -20px; }

                                #page_content_wrapper { margin-top: 20px; padding: 20px 0 20px 0 }

                                .caption_inner { width: 290px; }

                                .standard_wrapper { width: 290px; }

                                .small_thumb { width: 68px; height: 68px; }

                       

                                #page_content_wrapper .inner .inner_wrapper .sidebar_content img.img.portfolio_img, #page_content_wrapper .inner .inner_wrapper .sidebar_content img.portfolio_img, #page_content_wrapper .inner .sidebar_content { width:290px; }

                                .inner_wrapper > .one_third, .inner_wrapper > .two_third.last { width: 100%; }

                                .inner_wrapper > .two_third.last { margin-top: 20px; }

                       

                                #page_content_wrapper .inner { margin-top: 0; }

                                #page_content_wrapper .inner .inner_wrapper img { max-width: 100%; height: auto; }

                       

                                #page_content_wrapper .inner .inner_wrapper .sidebar_wrapper  { width: 100%; padding-left: 0;}

                                #page_content_wrapper .inner .inner_wrapper .sidebar_content { width: 100%; }

                                #page_content_wrapper .inner .inner_wrapper .sidebar_content .post_wrapper iframe, #page_content_wrapper .inner .inner_wrapper .sidebar_content .post_wrapper div, #page_content_wrapper .inner .inner_wrapper .sidebar_content .post_wrapper img, .post_wrapper img { max-width: 100%; height: auto; }

                                #page_content_wrapper .inner .inner_wrapper .sidebar_wrapper { margin-top: 10px; }

                       

                                #searchform input[type="text"] { width: 286px; }

                       

                                .comment { width: 286px; }

                                .comment_arrow { display: none; }

                                .comment .right { width: 79%; }

                                ul.children div.comment .right { width: 61.5%; }

                                #page_content_wrapper ul.children ul.children { width: 72%; }

                       

                       

                                #page_content_wrapper ul.children ul.children { width: 100%; }

                                ul.children .comment { margin-left: 0; }

                                #page_content_wrapper ul.children { border: 0; width: 410px; }

                                #page_content_wrapper ul.children ul.children { margin-left: -16px; }

                       

                                .comment_wrapper #respond { margin-left: 0; }

                                .comment_wrapper ul.children #respond { margin-left: -40px; }

                       

                                form textarea { max-width: 286px; }

                                .post_header .post_detail { display: none; }

                                .post_social { margin-top: 20px; }

                                #menu_border_wrapper .nav ul, #menu_border_wrapper div .nav { display: none; }

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

                                .logo_wrapper { margin-top: 10px; }

                                #menu_border_wrapper { text-align: center; margin: 10px 0 0 0; width: 100%; border: 0; }

                       

                                #imageFlow { top: 27%; height: 75%; }

                                .post_img img.frame { border: 0; }

                      }

                       

                       

                      /*

                      #Mobile (Landscape)

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

                      */

                       

                       

                      @media only screen and (min-width: 480px) and (max-width: 767px) {

                                .top_right, #slider_wrapper { display:none; }

                                .social_wrapper { width: 480px; }

                                #wrapper { width: 100%; margin: auto; }

                                #top_bar { width: 480px; height: auto; margin: auto; float: none; }

                                .page_caption, #page_content_wrapper { width: 450px; margin: auto; margin-top: 25px; }

                                .page_caption { width: 460px; }

                                .tagline { width: 420px; margin-left: -30px; }

                                #slider_wrapper { width: 480px; height: 200px; margin-top: 37px; }

                                .nivoSlider { width: 480px; }

                                .nivoSlider img { width: 480px; }

                                .nivo-controlNav { width: 480px; }

                                .standard_wrapper.small { width: 420px; }

                                .tagline_text { float: none; width: 100%; }

                                .tagline_button { float: none; width: 100%; text-align: center; margin-top: 30px; }

                                #footer { width: 480px; margin: auto; display: none; }

                                #footer ul.sidebar_widget { width: 420px; }

                                #copyright { width: 480px; }

                                .copyright_wrapper { width: 420px; }

                                .copyright_wrapper .left_wrapper { float: left; width: 100%; }

                                .copyright_wrapper .right_wrapper { float: left; width: 100%; text-align: left; }

                                #footer ul li.widget, #footer ul li.widget.last { float: left; width: 100%; }

                       

                                #content_wrapper { margin-top: -10px; }

                                .caption_inner { width: 440px; }

                                .standard_wrapper { width: 440px; }

                       

                                #content_wrapper .inner { margin-top: 0; }

                       

                                #page_content_wrapper .inner .sidebar_content, #page_content_wrapper .inner .sidebar_wrapper { width: 480px; }

                                #page_content_wrapper .inner .inner_wrapper .sidebar_wrapper, #page_content_wrapper .inner .sidebar_wrapper .sidebar  { width: 100%; padding-left: 0;}

                                #page_content_wrapper .inner .inner_wrapper .sidebar_content { width: 100%; }

                                #page_content_wrapper .inner .inner_wrapper .sidebar_content iframe, #page_content_wrapper .inner .inner_wrapper .sidebar_content div, #page_content_wrapper .inner .inner_wrapper .sidebar_content .post_wrapper img, .post_wrapper img { max-width: 100%; }

                                #page_content_wrapper .inner .sidebar_wrapper .sidebar .content { margin-left: 0; }

                       

                                #searchform input[type="text"] { width: 426px; }

                       

                                .comment { width: 480px; }

                                .comment_arrow { display: none; }

                                .comment .right { width: 79%; }

                                ul.children div.comment .right { width: 61.5%; }

                                #page_content_wrapper ul.children ul.children { width: 72%; }

                       

                       

                                #page_content_wrapper ul.children ul.children { width: 100%; }

                                ul.children .comment { margin-left: 90px; }

                                #page_content_wrapper ul.children { border: 0; }

                                #page_content_wrapper ul.children ul.children { margin-left: -16px; }

                       

                                .comment_wrapper #respond { margin-left: 35px; }

                                .comment_wrapper ul.children #respond { margin-left: -40px; }

                       

                       

                                form textarea { max-width: 480px; }

                                .post_header .post_detail { display: none; }

                                .post_social { margin-top: 20px; }

                                #menu_border_wrapper .nav ul, #menu_border_wrapper div .nav { display: none; }

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

                                .logo_wrapper { margin-top: 10px; }

                                #menu_border_wrapper { text-align: center; margin: 10px 0 0 0; width: 100%; border: 0; }

                      }

                      • 8. Re: Navigation bar floating, can't seem to position to top
                        lovehhi Community Member

                        Nancy...do you ever work in Joomla and is it anymore stable? I need to work with templates wherein my clients can do their own updates.

                        • 9. Re: Navigation bar floating, can't seem to position to top
                          sudarshan.t Community Member

                          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
                          • 10. Re: Navigation bar floating, can't seem to position to top
                            lovehhi Community Member

                            > Sudarshan...before I adjust...let me try and understand.

                             

                            You are suggesting to change the width to 100% in grid.css, yet I am not seeing an issue on my tablets, etc...only in the full desktop version. So, I am not understanding wht to mess with this file? My apologies...I am in learning mode and want to understand what I am doing and why.

                             

                            You also mentioned about the menu div breaking due to image and menu items not resizing. Ive noticed that my google fonts plugin keeps disappearing. Meaning it stops working in the them. I will go look at it and it will ahve a kb of 0, so then I have to reupload it and all is fine, but this doesn't seem to affect the top bar. More that I am just thinking it could be an indication of an issue.

                             

                            So..if it is a div breaking...any ideas where the code is to fix this issue?

                             

                            PS ~ I've worked in Joomla and it felt stiffer than WP, besides I work with small business clients I feel that the combo with the blog is the best solution for them. I guess I just have to wade through the muck and figure which WP designers tend to be on top of there theme developmnt.

                             

                            > Nancy...if you have any suggestions I am open!

                            • 11. Re: Navigation bar floating, can't seem to position to top
                              sudarshan.t Community Member

                              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.

                              • 12. Re: Navigation bar floating, can't seem to position to top
                                John Waller MVP

                                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?

                                • 13. Re: Navigation bar floating, can't seem to position to top
                                  lovehhi Community Member

                                  Chrome ver 25.0 - Note floating top bar and floating thumbnails

                                  Kaufman Photography-Chrome-NavBarRibbon.png

                                   

                                  Firefox ver 19 - Note although top bar is flush at top, thumbnail still floats at bottom

                                  Kaufman Photography-Firefox-Footer.png

                                  • 14. Re: Navigation bar floating, can't seem to position to top
                                    sudarshan.t Community Member

                                    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?

                                    • 15. Re: Navigation bar floating, can't seem to position to top
                                      lovehhi Community Member

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

                                       

                                      1) Bought a premium theme from ThemeForest by a designer with high accolades, yet rarely answers a support question all the way through leaving purchasers frustrated. As a result, I am asking help in my two best go to communities - DW Forum and WP Forum

                                       

                                      2) Theme was originally working (although I bought it right when there were massive updates to Wordpress or themes) until I loaded my logo, at which time, everything began to "break" or go wonky. I have since started completely over completey with a newly updated, fresh install, viewing files through completely updated browsers: Chrome, IE, Firefox, Safari.

                                       

                                      3) Any CSS updates I do through a child theme, which is fine, but has not successfully addressed the issue of the "top_bar" (white ribbon) from floating. Although it looks fine in IE & Chrome, you can still view that the footer is floating. See the images I posted above. While I can create a website in DW and deal with CSS, I am at a loss as to how to handle the various elements that may be causing this issue.

                                       

                                      4) I hesitate to believe it is simply a div issue having to do with menu bar and logo and not something related to the "supersized" gallery plugin as this floating bar ONLY occurs on pages in which I install this plugin. Yet...crazy as it seems, I want to use this plugin. If you look at my website, you will see that everything is fine in other pages:

                                       

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

                                       

                                      In the end, I woul dl ike to understand why this is happening...but I get that I may just have to let it go and try employing a plugin not originally intended for this theme template.

                                       

                                      Samantha

                                      • 16. Re: Navigation bar floating, can't seem to position to top
                                        lovehhi Community Member

                                        The "Core" logo appears when I remove my personal logo. The screen shot is from earlier...still either logo the issue remains the same. Let me go give what you suggest a try!! Oh...and I do ahve Chrome 25. Not sure why it looks not right on my stuff. I have viewed in several computers and devices. Will rid cache and see what comes up too!

                                        • 17. Re: Navigation bar floating, can't seem to position to top
                                          sudarshan.t Community Member

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

                                          • 18. Re: Navigation bar floating, can't seem to position to top
                                            lovehhi Community Member

                                            Yay..the change you suggest worked, Sudarshan!

                                             

                                            Now to figure out the top_bar!

                                            • 19. Re: Navigation bar floating, can't seem to position to top
                                              Nancy O. MVP

                                              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.

                                              • 20. Re: Navigation bar floating, can't seem to position to top
                                                sudarshan.t Community Member

                                                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

                                                • 21. Re: Navigation bar floating, can't seem to position to top
                                                  sudarshan.t Community Member

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

                                                   

                                                  • responsive.is
                                                  • responsinator.com
                                                  • 22. Re: Navigation bar floating, can't seem to position to top
                                                    John Waller MVP

                                                    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.

                                                    • 23. Re: Navigation bar floating, can't seem to position to top
                                                      sudarshan.t Community Member

                                                      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?!

                                                      • 24. Re: Navigation bar floating, can't seem to position to top
                                                        lovehhi Community Member

                                                        Sudarshan...I don't know what to say.   I cleared my cache ...which I had believed myself to have done earlier...and it is working for me now just like your image above.

                                                         

                                                        I honestly don't know what to say. I'm sure...as you were stating all along...it was fine and that the only issue was that 3px on the thumbnail.

                                                         

                                                        I humbly thank you and all who have worked so hard and be patient trying to assist me in this.

                                                         

                                                        Nancy...thank you for the responsive testers...and I will store those and the ones Sudarshan have given me. I've learned such a great deal through all of this!

                                                        • 25. Re: Navigation bar floating, can't seem to position to top
                                                          sudarshan.t Community Member

                                                          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!

                                                          • 26. Re: Navigation bar floating, can't seem to position to top
                                                            lovehhi Community Member

                                                            Back to the problem that you actually see...the grid.css

                                                             

                                                            When I open up that coding...I see a section for Tablet, Mobile (Portrait) and Mobile (Landscape). Are you refering to mobile landscape or could you give me a line that you are directing my attention to?

                                                            • 27. Re: Navigation bar floating, can't seem to position to top
                                                              lovehhi Community Member

                                                              Sudarshan...I'm actually reading a lot on what oyu are saying, but don't see how to write the code as 100%  and I am not sure, but I guess you are saying the first two @ media instances are okay, but it is the last one that needs this rewrite? This is new to me!

                                                              • 28. Re: Navigation bar floating, can't seem to position to top
                                                                sudarshan.t Community Member

                                                                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.

                                                                • 29. Re: Navigation bar floating, can't seem to position to top
                                                                  lovehhi Community Member

                                                                  Sorry...don't mean to sound stupid...but when you do that line through the words...does that mean to remove that word? I see it in Chrome Inspector and always assumed it meant that the css element was being overwritten by something, but I've never done this myself.

                                                                   

                                                                  Oh...and should I be doing thi to the direct file or is there some sort of "child" css I should be creating with this?

                                                                  • 30. Re: Navigation bar floating, can't seem to position to top
                                                                    sudarshan.t Community Member

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

                                                                    • 31. Re: Navigation bar floating, can't seem to position to top
                                                                      sudarshan.t Community Member

                                                                      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.

                                                                      • 32. Re: Navigation bar floating, can't seem to position to top
                                                                        lovehhi Community Member

                                                                        Okay...that looks a lot nicer. I am viewing this through the Responsinator website and it looks like the top_bar is floating from the top of the page...any ideas on that?

                                                                        • 33. Re: Navigation bar floating, can't seem to position to top
                                                                          sudarshan.t Community Member

                                                                          Line 125 of grid.css:

                                                                           

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

                                                                           

                                                                          Remove the highlighted rule.

                                                                          • 34. Re: Navigation bar floating, can't seem to position to top
                                                                            lovehhi Community Member

                                                                            looks like it is still floating...how does it look to you?

                                                                            • 35. Re: Navigation bar floating, can't seem to position to top
                                                                              lovehhi Community Member

                                                                              Hmmm...fixed cache and that solved problem, but now you can only see the bottom of the image? Is there a way to resize the gallery so that all images show and maybe no thumbs?

                                                                              • 36. Re: Navigation bar floating, can't seem to position to top
                                                                                sudarshan.t Community Member

                                                                                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.

                                                                                • 37. Re: Navigation bar floating, can't seem to position to top
                                                                                  lovehhi Community Member

                                                                                  you mean above #top_bar?

                                                                                  • 39. Re: Navigation bar floating, can't seem to position to top
                                                                                    lovehhi Community Member

                                                                                    Wow!!! this looks soooo much better. I realize I will need to reduce the amin menu selections so that the menu will not jump down below on the iPad setting, but it is nice that in all of the smaller sizes, the menu becomes a single dropdown.

                                                                                     

                                                                                    I only plan to sue this full screen mode for home page so other galleries are coming up looking great and fitting perfect on even smallest devices. Many, many thanks, Sudarshan!!

                                                                                    1 2 Previous Next