• I am trying to get the headline of my blog title to be on one line, instead of two.

    How can i accomplish this with custom CSS?

    I got some help with the headline. I understand the headline component is assigned a class that tells it how many columns to take up.

    I’ve tried to increase the number of columns, and to decrease the number of columns the navigation menu takes up so that it wouldn’t push that down to the next line.

    However, I see that bootstrap code is very long for this particular feat. Can you help simplify this?

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You could do it with CSS without messing with the number of columns. Something like this:

    .site-branding,
    .main-navigation {
         width: 50%;
    }

    And you’ll have to add some media queries to make it as you want on smaller screen too:

    @media (min-width: 991px) {
       .site-branding,
       .main-navigation {
           width: YOURWIDTHHERE;
        }
    }

    Thread Starter belovedarrow

    (@belovedarrow)

    Thanks again. The site branding code worked perfectly. You’re a great help.

    However, I don’t quite understand the media queries…

    Are these in the event that the site is viewed in full on a mobile device? I noticed that when I view the site in full on my mobile device, the blog title and the tagline below it are on a left column, with the pull-down menu bar in the center. What width shall I set there? When I enter 991px min, as you stated, I get an error on the custom CSS.

    I did check online and found this:

    // Small screens
    @media only screen { } /* Define mobile styles */
    
    @media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

    I also found this site.

    Please advise. Thanks Vladff.

    The media queries will set different widths for those two elements for different screen widths. In my example I wanted to write @media (max-width: 991px) instead of min.

    So until now you’ve set 50% for the branding and 50% for the menu.
    You now need to make sure your changes will look good on smaller screens. For example you can add this:

    @media (max-width: 991px) {
       .site-branding {
           width: 70%;
        }
    }

    And continue in this manner for other screen widths if you feel it’s necessary. This should get you started but please note that this is more about using CSS than a theme related thing.

    Excuse me Vlad,
    I want to ask help to you,
    here is my problem, i want to make my menu to be a single line, and move my site logo to left.
    is that possible? i’ve try some other way from the thread, and it won’t work perfecly

    here is my site : http://pijarsukma-furniture.com/

    Thanks a lot

    hi
    I want to change my top header background color. i am unable to find the respective css file.
    plz help me where i can get the css file so that i can change th css using child theme

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Headline/ Tagline on One Line’ is closed to new replies.