[amrobertson86]

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

[Sakin]

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;
  }
}

[amrobertson86]

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!

[amrobertson86]

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;

}

[amrobertson86]

Any update on the above questions please?

Happy to raise a new post per question if required.

Thank you.

[Author]

Posts