Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #310891
    amrobertson86
    Participant

    Hi team,

    I have recently made my partner’s site live. I really like this template and have changed the CSS quite a bit, but I have a few little niggles that I’m struggling to solve.

    1) Amend 404 page

    Example URL – https://www.rachaelholmes.co.uk/123

    I would like to amend the 404 page to remove all widgets on the right hand side of the page, so this page just has the large “Search a keyword” search box and text above it centred in the page.

     

    2) Add underline to dropdown menu in desktop view.

    If you hover over “Portfolios” it has two sub pages. I would like to improve the look of the grey drop down box and add a hover underline when “Brand Portfolio” or “Portraiture Portfolio” are hovered over.

     

    3) Logo and hamburger menu in tablet and mobile view.

    Because my logo is circle, it does not seem to sit to well in tablet or mobile view. I’ve used some CSS to move the hamburger menu more to the right, but I’m open to suggestions here on how to improve the look. Could I hide the logo in these views? could I specify a different logo for these views?

     

    Thanks in advance

    #310905
    Sakin
    Keymaster

    Hi @amrobertson86:

    1. For this, you can either build a child theme and then edit the 404.php file where you can remove the code get_sidebar(); or you can just hide it using CSS. For that you need to add the following CSS in “Appearance => Customize => Additional CSS” box:

    .error404 .sidebar {
      display: none;
    }
    .error404 .content-area {
      float: none;
      margin: 0 auto;
    }

    2. This is not really good as per the design but if you want to add the following CSS in the “Appearance => Customize => Additional CSS” box:

    @media only screen and (min-width: 75em) {
      .navigation-classic .main-navigation ul ul a:hover,
      .navigation-classic .main-navigation ul ul a:focus {
        text-decoration: underline;
      }
    }

    3. You can add the following CSS in the “Appearance => Customize => Additional CSS” box, the following CSS will make the logo size 100px and also will revert the margin that you have added for the desktop.

    @media only screen and (max-width: 1199px) {
      .site-header .site-header-main {
        margin-top: 0;
      }
      .site-header-main .site-header-menu {
        margin-left: auto;
        margin-bottom: 14px;
      }
      .custom-logo {
        max-width: 100px;
      }
      .site-branding {
        margin: 0;
      }
    }
    #310972
    amrobertson86
    Participant

    Thank you for the quick reply, Sakin. The CSS you provided does the job great.

    For some reason, I did not get any follow-up emails to let me know you provided a reply, hence my late reply.

    For the menu underline CSS, how can I get the same thickness and colour as the other menu underlines?

    text-decoration-thickness and text-decoration-color?

    Hex colour is: #e54d39

     

    Thank you!

    #311020
    amrobertson86
    Participant

    Is it also possible to apply this CSS to the search page? https://www.rachaelholmes.co.uk/?s=1234

    .error404 .sidebar {

    display: none;

    }

    .error404 .content-area {

    float: none;

    margin: 0 auto;

    }

    #311203
    amrobertson86
    Participant

    Any update on the above questions please?

    Happy to raise a new post per question if required.

    Thank you.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.