Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #293519

    These questions are coming from the perspective of a site that has just been upgraded from 1.0 to 1.7.2. So far, the great news is that the slideshow now works properly. What follows are some questions about some tweaks for mobile, mostly to work with the Home page. Hopefully these are still within the scope of your support.

    1- On the home page the logo is currently part of the banner image. On mobile this means the logo gets cropped off. What I originally intended to do was to separate the logo from the banner and to have the logo then float on top of the banner with mobile and be able to stay in view the way it does for the other pages—just on the home page. Since it seems to be an either/or with the banner and logo I would like to know if it is possible to have both and, if so, what other changes are needed, including what I would need to add to the CSS—as well as any image sizing guidance that might differ.

    2- Again on the Home page, the navigation menu gets pushed down and displays almost at the bottom of the mobile view, tending to blend in with the rest of the content. Can this be adjusted in the CSS?

    3- In the mobile menu itself, the primary and secondary pages only differ in that the secondary pages are slightly indented. Is there a way to make the two more visibly distinct, helping to maintain the hierarchy for site visitors? I will be looking into the CSS for this, but anything that will get me there faster would be awesome. I am thinking that even bolding the primary listings will be an improvement.

    thank you


    Hey thepowerofcolor!

    1- Please add following code to Quick CSS in Flagship theme options under Styling tab

    @media only screen and (max-width: 768px) {
    div#apply_header_bg { background-image: url(banner-without-logo.jpg); }
    .logo { display: block !important; }}
    @media only screen and (min-width: 768px) {
    .logo { display:none !important; }}

    then please upload your logo in Flagship theme options and change the banner link in the code i posted to your banner without your logo.

    select#mobileMenu_menu-aatpoc {
    position: relative;
    top: -520px;

    3- Unfortunately it is not possible to make such CSS adjustments in the mobile menu



    I have the background banner without the logo up on the home page. On the full size site the logo fails to reappear over the banner. Since the logo for the other pages is smaller than what was embedded in the banner this may not be a visual success but I would still like to see it thorough. (I don’t suppose it is possible to have two different logos, one for home and one for all of the other pages?) On the mobile version the logo is now missing from all of the pages, clearly not what is needed, and yet that looks like what the code is calling for.

    There was no change in the location of the navigation menu on the home page of the mobile site.
    What next?

    Another thing that would help would be if I can remove the search bar from the div with the page title. This also serves to push down the content on the mobile site, and I am relocating it to the sidebar.

    Thank you!


    I tried removing the line with .logo { display:none !important; } and found that my theory was incorrect and it didn’t cause the logo to appear on top of the home banner. Is it even possible to have both the home banner AND the separate logo riding on top of it?

    I have also tried changing the pixel values in the code for the placement of the navigation menu on the mobile home page `select#mobileMenu_menu-aatpoc {
    position: relative;
    top: -420px;
    and it didn’t make any difference. Another thing I am seeing is that if I turn the display to landscape the only thing visible is the banner—no navigation or anything else. Now with the logo missing it gives visitors no clue of where they are or could go without scrolling. It seems to me that allowing for the banner in mobile has been completely overlooked in the design of the theme. Isn’t there a fix for this that everyone can use? Perhaps an alternative to the banner just for mobile?
    I could really use some help with this. Thanks



    First I would start with cleaning up your current css so that things you want to happen in the desktop are in a desktop media query and then the things you want on mobile are in their own mobile media query:

    Desktop Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */
    @media only screen and (min-width: 768px) {
      /* Add your Desktop Styles here */
    Mobile Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */

    Then you can tweak things on each display type without having cascading negative effects in the other. This is quite a bit beyond what we can cover via support but the above should get you 90% the way there from looking over what you have and what I *think* you are trying to do.


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.