Can someone please help mewith CSS customization problems with Big Brother Theme

• 

  mobidark · Member · May 13, 2016 at 5:28 pm

  • Copy link
  • Add topic to favorites

  I am customising a Big Brother WP theme website, as I wasn’t happy with twenty Sixteen theme as it left a large white space on the left on the homepage. I have made good progress in transferring the details, and doing CSS customization, but there are 3 problems I need some help with:-

  1. If you look at the website, you will see a grey strip (box) which encloses the menu items at the top, in the header area. The box goes right across the web page. I want to remove it and just show the menu items over the white background. The grey strip also interferes with the blue border I have created. I can make the strip disappear, but the menu titles also disappear….

  2. I want to put black horizontal lines between each widget on the sidebar- the same as they look in the 2016 theme.

  3. The sidebar widgets do not appear properly in tablet view and not at all in smartphone view. Can this be fixed, so that they appear full width after the main body text when scrolling down?

  I have only been using CSS for two weeks, but I have been quite successful in making a number of customizations, but the three problems​ above are beyond my limited knowledge.

  If there is anyone who can help me with this I will be eternally grateful.

  Many thanks,

  Mobi

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 13, 2016 at 9:17 pm

  • Copy link

  Hi Mobi,

  1. If you look at the website, you will see a grey strip (box) which encloses the menu items at the top, in the header area. The box goes right across the web page. I want to remove it and just show the menu items over the white background. The grey strip also interferes with the blue border I have created. I can make the strip disappear, but the menu titles also disappear….

  Add this to your custom CSS to make the navigation background transparent.

  .main-navigation {
      background-color: rgba(0, 0, 0, 0);
  }

  2. I want to put black horizontal lines between each widget on the sidebar- the same as they look in the 2016 theme.

  Add this. I’ve excluded the border from the last widget on the bottom using a last-of-type pseudo selector.

  .widget {
      border-bottom: 4px solid #000;
      margin-bottom: 20px;
  }
  .widget:last-of-type {
      border-bottom: none;
  }

  3. The sidebar widgets do not appear properly in tablet view and not at all in smartphone view. Can this be fixed, so that they appear full width after the main body text when scrolling down?

  This is due to the following rule you have in your custom CSS.

  .secondary {
      float: right;
      width: 30%;
  }

  Find that and replace it with this Media Query, which limits this width to 960px and wider screens so that it lets the design go back to the original when the sidebar moves below the content.

  @media screen and (min-width: 960px) {
  .secondary {
      float: right;
      width: 30%;
  }
  }