Support » Fixing WordPress » How to set site logo in line with header

Viewing 9 replies - 1 through 9 (of 9 total)
  • Add this rule to your custom CSS:

    
    .site-title {
      display: inline-block;
    }
    

    By the way, I’m pretty sure you need to change the email address to heartland@gmail.com.

    Do I need a plugin to be able to add custom CSS?
    Thank you I am trying to learn how to use WordPress so fake company details at this stage. Really appreciate your help.
    Estelle

    Yay! Thank you I found where to add the custom CSS and it worked!!! Now my phone number and email address is out of whack, but I needed to find out how to format that better anyway. Do I need special CSS again?
    Kind regards
    Estelle

    No It didn’t work. Looks right in the dashboard, but not on the actual site. 🙁

    I see the site title inline with the logo. Isn’t that what you are trying to do?

    Ah, that made me think. It seems to be a browser issue. I was using Firefox, but seeing your reply, I checked using Google Chrome and it displays correct there. I’ll have to ensure it displays correct in all browsers though….Any ideas?
    Also do you have any advice on how to change positioning and size of the contact details in the header?
    Thank you
    Estelle

    It actually works OK in Firefox as well, but it depends on the width of your browser window. Try making your Firefox window wider and you should see the title line up with the logo. Or if you make your Chrome window narrower, you’ll see the title break down to the next line. The way the theme is constructed, half of the width (exactly 50%) for the header is assigned to the logo & title while the other half is for the contact information, so when the window narrows past a certain point, the title is going to wrap because it’s too long to fit the space allotted.

    Since you don’t need as much room for the contact info, you can mitigate the effect by adding these rules:

    
    @media (min-width: 992px) {
      .header .col-md-6 {
      	width: 33%;
      }
      .header .logo.col-md-6 {
      	width: 66%;
      }
    }
    

    This assigns two-thirds of the header width to the logo & title and the other third to the contact info.

    No my Firefox is full screen and still not displaying in one line. Maybe it’s just my computer, will test it on another tomorrow. Anyways I will add the code you supplied. Thank you. How did you find out about the width of the header? Do you go into the editor and just search and search until you find the relevant area of code?

    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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to set site logo in line with header’ is closed to new replies.