• Resolved fantasy_5

    (@fantasy_5)


    Hi!

    I have added a floating footer bar to my website and it works great. However, it falls out side of the view port when viewed in mobile browsers… so it is cut off. Here is the code

    .navbar{margin-bottom:0px !important;}

    /*WPBeginner Footer Bar*/
    .fixedBar{background: #e26fe1; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px 0; position:footer; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 0.95; font-weight: bold;}

    .boxfloat{text-align:center; width:920px; margin:0 auto}

    #tips, #tips li{margin:0; padding:0; list-style:none}

    #tips{width:920px; font-size:20px; line-height:120%;}

    #tips li{padding: 15px 0; display:none}

    #tips li a{color: #fff;}

    #tips li a:hover{text-decoration: none;}

    I have been going bonkers trying to figure it out, but can’t seem to wrap my brain around it. Also, I would like my site to be mobile responsive across all browsers rather than having to double tap in order to expand the screen.

Viewing 15 replies - 16 through 30 (of 31 total)
  • CrouchingBruin

    (@crouchingbruin)

    Sure. The article says you want to use a target string that mimics a normal search for your site. So, for example, this URL will return search results where “obama” was part of the search string:

    https://celebrityscope.net/?s=obama

    You just substitute {search_term_string} for obama and that should be the correct target string.

    Thread Starter fantasy_5

    (@fantasy_5)

    Many thanks & kind regards! ??

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    I’m back again and still trying to resolve the search box issue. Last we spoke I tried it out, but there were a few errors. I cleared all of them up except 1. {search_term_string} is the only part of the code that is incorrect and for the life of me I can’t figure out why or what to put there. I have read the site link search box documentation, but I’m still puzzled. :/

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "url": "https://celebrityscope.net/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://query.celebrityscope.net//search?q={celebrity}",
        "query-input": "required name=celebrity scope={search_term_string}"
      }
    }
    </script>

    Look at item 2 under the search box example. It says this:

    2. potentialAction:target – This property specifies a search URL pattern for sending queries to your site’s search engine. …

    Key points about the URL pattern:

    • It must include a string enclosed in curly braces that is a placeholder for the user’s search query (e.g., {search_term_string}). The string inside the curly braces must also appear in the name attribute of the query-input property.
    • It must point to the same domain on which the markup is found.
    • An actual query string instead of the placeholder string must produce valid search results from your site or app.

    The third bullet point is very important. What this means is that if you were to use the target string in an actual search, it should return the expected results. The parameters may be different for every site. You can’t use this:

    https://query.celebrityscope.net//search?q={celebrity}

    Because if you were to do a search on “obama”, this URL returns an error:

    https://query.celebrityscope.net//search?q=obama

    This string would return the correct search results:

    https://celebrityscope.net/?s=obama

    So what you do is substitute “obama” with {search_term_string}, because that’s going to be a general placeholder for the actual search term being used. So your script should look like this:

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "url": "https://celebrityscope.net/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://celebrityscope.net/?s={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>
    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    According to the structured data testing tool you are 100% correct yippee!!! Finally, my brain can rest. I appreciate all of your help. Many thanks & kind regards. ??

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    I added a top navigation menu bar to my theme and it looks great. However, I do notice some white space at the very top (between nav menu bar and slide show) during first page load that does not stay once loaded 100% on desktop view.

    The white space stays on mobile view which makes it difficult for the navigation menu to fire on some pages other than the homepage. Is there a way to remove this/

    i saw someone use this code for a different theme. Is it possible to adjust it so that it applies to my theme instead? Thanks in advance for your assistance. Your replies have been very helpful.

    .header-image {
      margin-top: 0;
    }
    
    .hgroup-wrap {
      display: none;
    }

    I’m sorry, but I’m not seeing the white space between the top menu and slider, neither when the site loads on my desktop browser, nor in Chrome or Safari on my iPhone.

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin1

    Thanks for your reply. I have an android. Perhaps it’s an issue that is exclusive to this type of device. For instance, the top navigation bar works and displays as it should on the home page and all page taps fire properly upon selection. However, there is a gap that exists in viewing the about page and there the menu doesn’t work properly. Same issue on the shop, archives, and, contact pages. :/ The gap of white space appears between “Celebrity Scope and “menu,” in the header. I’m currently, viewing the site in chrome, same issues in firefox.

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    I am trying not to display my top navigation menu on any pages except the home page on mobile devices. (navbar navbar-inverse)The drop down isn’t working properly in mobile view on any pages except home and I have been racking my brain trying to figure out why.

    Everything is fine and works properly on desktop view so I am pleased with that side of things.

    However, I would like to display the regular menu on mobile devices
    (nav)on all pages or just create a new one for mobile view only.

    How can I go about achieving this? I tried adding the code below and it didn’t work even after deactivating my caching plugin.

    @media only screen and (max-width: 767px) {
    	.navbar navbar-inverse { display: none; }
    }

    Try this instead:

    @media only screen and (max-width: 767px) {
       .navbar.navbar-inverse { display: none; }
    }

    Because the navbar and navbar-inverse classes are part of the same element, you have to put them together with no intervening space. Otherwise, the browser thinks the navbar-inverse element is a child of the navbar element. Plus, you were missing a period before `navbar-inverse’.

    So what the above rule will do is hide the top menu at mobile widths on all pages.

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    Thanks for your reply. I tried that and it didn’t work. I even tried the code below and that didn’t work either.

    @media only screen and (max-width: 767px) {
       .menu { display: none; }
    }

    I’m okay with the menus being on the homepage i just don’t want them to show up on the other pages or on single posts because i might create a new mobile menu. I’m not sure why it isn’t working properly on mobile devices. I have been racking my brain. Is there a way to get the code to work using specific page numbers to display none or is there a trick to get the current menu to work on mobile?

    Are you sure it’s not working? I don’t see the top menu on my cell phone, nor when I make the desktop browser narrow.

    If you are trying to hide the empty toggle menu on your other pages, try adding these two rules as well:

    .toggle a:nth-child(1) {
       display: none;
    }
    .toggle .toggleMenu {
       margin-top: 0;
    }

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    Yes! The top navigation menu is now gone on mobile view… thank you. However, the toggle menu is still visible there. :/ I still see the toggle menu on the single posts and other pages. I also tried this code and still no such luck.

    @media only screen and (max-width: 767px) {
       .nav { display: none; }
    }

    Here is a single post example

    Is there a way to not display it on mobile devices by specific page number? Here are the page numbers for every page I don’t want it to display and also do not want it on single posts pages. Both menus are fine to display for mobile on the home page only.

    1816(About), 2522(Archives), 1985(Contact), 3074( Affiliate Policy), 3656(Privacy Policy), 4050(Sitemap), 1997(SHOP) 4464(The KEI Model), 2477(Blog — Posts Page), 3094(365 Black)

    These rules will hide the toggle menu on all pages except the home page at mobile screen widths:

    @media only screen and (max-width: 767px) {
       .header-inner .toggle { display: none; }
       .blog .header-inner .toggle { display: block; }
    }

    The first rule inside the media query will hide the toggle menu by default, the second one will display it on the blog (home) page.

    Make sure to clear your cache in order to see your updates. It looks like your host is using Pagespeed (or maybe you’re using it as a caching program?) so your updates might take a while to appear.

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    I wanted to wait a bit before replying to give the changes times to take affect, but no such luck. The menu is still displaying on all pages. ?? However, it is no longer displaying on any of the single posts. ??

    Here is the code that I put in my custom css

    @media only screen and (max-width: 767px) {
       .navbar.navbar-inverse { display: none; }
    }
    
    @media only screen and (max-width: 767px) {
       .header-inner .toggle { display: none; }
       .blog .header-inner .toggle { display: block; }
    }
    
    .toggle a:nth-child(1) {
       display: none;
    }
    .toggle .toggleMenu {
       margin-top: 0;
    }
Viewing 15 replies - 16 through 30 (of 31 total)
  • The topic ‘Use media queries to make objects mobile responsive’ is closed to new replies.