locked
Logo not showing on some pages RRS feed

  • Question

  • I have recently changed the logo image on my website.  I can see the image on every page in design view but when I view on line the logo is missing from some pages even though I have copied and pasted the code to each page. Can someone have a look please. The site is http://www.ukipdoncaster.co.uk the problem occurs on the contact and volunteer page

    Thanks

    Friday, September 29, 2017 3:29 PM

Answers

  • Hmm... where to start...

    It's clear that you have not "... copied and pasted the code to each page," because you clearly have different page structures on the pages with the logo versus those without.

    On the pages displaying the logo, you have this body element structure:

    <body id="home">
      <header>
        <header class="wrapper clearfix">
          <div id="banner">
          <nav id="topnav" role="navigation">
        </header>
        <section id="hero" class="clearfix">
        <div id="main" class="wrapper">
        <footer>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
        <script>
        <script defer="" src="js/flexslider/jquery.flexslider-min.js">
        <script src="js/main.js">
      </header>
    </body>


    While on the pages that don't display the logo you have this body element structure (note the missing "header" wrapper element, as well as the missing "header" embedded div):

    <body>
          <nav id="topnav" role="navigation">
          <section id="page-header" class="clearfix">
          <div id="main" class="auto-style2">
          <footer>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
          <script>
          <script defer="" src="js/flexslider/jquery.flexslider-min.js">
          <script src="js/main.js">
    </body>

    On the pages displaying the logo, you have, for unknown reasons, wrapped the entire page in a header element. That's not the main issue, however. The main issue is that on the pages not displaying the logo you are missing the "banner" div, which contains this markup:

            <div id="banner">        
                <div id="logo"><a href="index.html"><img src="images/basic-logo3.png" alt="logo"></a></div>
            </div>

    There's your logo. Put that markup in the pages missing it and the logo appears, although you still have structural issues due to the differences in page layout between the logo pages and the non-logo pages. While it is true that you can paste that banner markup where needed as described above and you will be able to see your logo, that will not result in a structure like your other pages. On the logo displaying pages, you have that complete embedded header element, with this markup:

    <header class="wrapper clearfix">
      <div id="banner">
        <div id="logo">
          <a href="index.html">
              <img src="images/basic-logo3.png" alt="logo">
          </a>
        </div>
      </div>
      <nav id="topnav" role="navigation">
    </header>

    Note that in those pages displaying the logo the topnav menu div is contained within the embedded header div, while in the non-displaying pages the topnav menu div stands alone (since there is no embedded header div). So, to achieve the page structure you desire, you need to copy and paste that entire embedded header element into the contact and volunteer pages, and delete the existing topnav div, to avoid duplicating the menu, and Bob's yer uncle!  ;-)

    cheers,
    scott

    P.S. I should note that you have some pretty odd markup on the pages displaying the logo. On the non-logo pages the overall structure is this:

    <!DOCTYPE html>
    <html>
      <head>
      <body>
    </html>

    While on the logo pages you have this:

    <!DOCTYPE html>
    <html class=" js flexbox canvas canvastext webgl touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style="">
      <head>
      <body id="home">
    </html>

    Firstly, all that rubbish on the html element is just that, rubbish. The HTML element is a container. You don't normally assign CSS classes to it, and if you did, they would be actual classes, not all of that meaningless gibberish. It makes no sense and is completely unnecessary. Get rid of it.

    Secondly, it appears that you have assigned a "home" class to the body on those pages, apparently in an attempt to make the currently active page be highlighted in the menu. It doesn't work that way, with multiple pages having the same class. Here is a page that illustrates how you can do this using HTML/CSS only. You can also use javascript, if you wish, although the vanishingly small population of visitors with javascript disabled won't be able to see it.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Friday, September 29, 2017 9:49 PM
    • Marked as answer by sillyoldfart Saturday, September 30, 2017 9:46 AM
    Friday, September 29, 2017 7:25 PM

All replies

  • Hmm... where to start...

    It's clear that you have not "... copied and pasted the code to each page," because you clearly have different page structures on the pages with the logo versus those without.

    On the pages displaying the logo, you have this body element structure:

    <body id="home">
      <header>
        <header class="wrapper clearfix">
          <div id="banner">
          <nav id="topnav" role="navigation">
        </header>
        <section id="hero" class="clearfix">
        <div id="main" class="wrapper">
        <footer>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
        <script>
        <script defer="" src="js/flexslider/jquery.flexslider-min.js">
        <script src="js/main.js">
      </header>
    </body>


    While on the pages that don't display the logo you have this body element structure (note the missing "header" wrapper element, as well as the missing "header" embedded div):

    <body>
          <nav id="topnav" role="navigation">
          <section id="page-header" class="clearfix">
          <div id="main" class="auto-style2">
          <footer>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
          <script>
          <script defer="" src="js/flexslider/jquery.flexslider-min.js">
          <script src="js/main.js">
    </body>

    On the pages displaying the logo, you have, for unknown reasons, wrapped the entire page in a header element. That's not the main issue, however. The main issue is that on the pages not displaying the logo you are missing the "banner" div, which contains this markup:

            <div id="banner">        
                <div id="logo"><a href="index.html"><img src="images/basic-logo3.png" alt="logo"></a></div>
            </div>

    There's your logo. Put that markup in the pages missing it and the logo appears, although you still have structural issues due to the differences in page layout between the logo pages and the non-logo pages. While it is true that you can paste that banner markup where needed as described above and you will be able to see your logo, that will not result in a structure like your other pages. On the logo displaying pages, you have that complete embedded header element, with this markup:

    <header class="wrapper clearfix">
      <div id="banner">
        <div id="logo">
          <a href="index.html">
              <img src="images/basic-logo3.png" alt="logo">
          </a>
        </div>
      </div>
      <nav id="topnav" role="navigation">
    </header>

    Note that in those pages displaying the logo the topnav menu div is contained within the embedded header div, while in the non-displaying pages the topnav menu div stands alone (since there is no embedded header div). So, to achieve the page structure you desire, you need to copy and paste that entire embedded header element into the contact and volunteer pages, and delete the existing topnav div, to avoid duplicating the menu, and Bob's yer uncle!  ;-)

    cheers,
    scott

    P.S. I should note that you have some pretty odd markup on the pages displaying the logo. On the non-logo pages the overall structure is this:

    <!DOCTYPE html>
    <html>
      <head>
      <body>
    </html>

    While on the logo pages you have this:

    <!DOCTYPE html>
    <html class=" js flexbox canvas canvastext webgl touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style="">
      <head>
      <body id="home">
    </html>

    Firstly, all that rubbish on the html element is just that, rubbish. The HTML element is a container. You don't normally assign CSS classes to it, and if you did, they would be actual classes, not all of that meaningless gibberish. It makes no sense and is completely unnecessary. Get rid of it.

    Secondly, it appears that you have assigned a "home" class to the body on those pages, apparently in an attempt to make the currently active page be highlighted in the menu. It doesn't work that way, with multiple pages having the same class. Here is a page that illustrates how you can do this using HTML/CSS only. You can also use javascript, if you wish, although the vanishingly small population of visitors with javascript disabled won't be able to see it.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Friday, September 29, 2017 9:49 PM
    • Marked as answer by sillyoldfart Saturday, September 30, 2017 9:46 AM
    Friday, September 29, 2017 7:25 PM
  • Thanks for your help. At 73 years I am beginning to get the hang of this web mularky... Maybe in another 10 years I will have mastered it!
    Saturday, September 30, 2017 9:47 AM