Divi WordPress Theme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WordPress fix Reply To: How to set site logo in line with header

Discussion in 'Misc WordPress Requests' started by CrouchingBruin, Jan 8, 2018.

  1. CrouchingBruin


    Reply To: How to set site logo in line with header, by CrouchingBruin

    Hi, Estelle:

    It’s not very simple or straight forward to explain the width of certain elements, because it involves a bit of technical details, and I’m not sure what your level of expertise is regarding web design.

    So you want to learn how to use one of the developer tools that comes integrated with Firefox and Chrome. With both browsers, you would right-click on the element that you wish to inspect and pick Inspect Element (Firefox) or Inspect (Chrome) from the pop-up menu. The developer tool will open up at the bottom of the browser window. On the left pane is a representation of the code (HTML) structure and the right pane shows the CSS rules that affect the currently highlighted element. As you move your mouse over the different elements on the left pane, you’ll see highlighting appear in the top pane that indicates where in the page the element appears. If you click on a different element in the left pane to highlight it, the CSS rules on the right pane will change to show you the rules for that element.

    The rules on the right pane are ordered according to the selector’s specificity (i.e., the rules at the top have a higher specificity than the rules under it). What’s nice about the CSS pane is that you can change the values of different properties and immediately see the effect on the web page. For example, if you wanted to see how changing the font size of the site title from 36px to 30px, you click on the site title’s element to highlight it so its CSS rules come up on the right, look for the rule which has the font-size property, and change the value of that property by clicking on it and typing a new value. So you can play around with the inspector before actually writing the overriding CSS rule in your custom CSS.

    If you inspect the header area, you’ll see that it consists of a div with a class of row, and inside that div are two other divs, each with a class of col-md-6. So it looks like the theme is built on a 12 column structure (which is common with many of today’s responsive themes), meaning the elements within each row are positioned within sections that add up to 12.

    In the case of the header, the logo and site title are in a section that’s 6 columns wide, and the contact information is also in a section that’s 6 columns wide. If you look at the CSS rules for those two sections, you’ll see that the width property of a col-md-6 class is 50%, which makes sense, because 6 is half of 12.

    If you examine the main part of the page, you’ll see that there’s a left sidebar, the main content area, and a right sidebar. The two sidebars each have a class of col-md-3 while the main content area has a class of col-md-6. If you look at the CSS rule for the col-md-3 class, you’ll see that the width is set to 25%. So the two sidebars are each half the width of the main content (which is 6 columns, or 50%), and all three sections add up to 12 columns.

    It seems a little complicated, but the important thing is that when a row of a page is divided up into multiple sections, the columns in those sections must add up to 12 (for this particular theme). The header is divided into two sections of 6 columns each, so each section has a width of 50%. The main content is divided into three sections, with the left & right sidebar taking up 3 columns each (25%) and the middle content taking up 6 columns (50%).

    So, when you want to adjust the amount of space allocated to a particular section, the suggested way to do that is to create a child theme, make a copy of the code file which contains the header, and change the classes of the sections so that they take up different amounts of columns. For example, if you want the logo & title to take up two-thirds (66%) of the width, you would change the class of that div from col-md-6 to col-md-8 so instead of spanning 6 columns, it spans 8 columns, and then change the class of the contact info div from col-md-6 to col-md-4 so it spans 4 columns.

    However, creating a child theme can be intimidating to a beginning developer, so the CSS rule that I provided basically does the same thing. The rules don’t change the width of all col-md-6 elements (because you don’t want that to happen), but just the ones inside the header.

    Reply To: How to set site logo in line with header

Share This Page

Monarch Social Sharing Plugin