Changing appearance of site title and header in responsive mode

  • Hi. I would like to change the location in which the site title is displayed when in responsive view. This change would only affect mobile devices.

    If you view the following link in responsive mode at 320 x 480, you can see the site title in a huge font right at the top.
    Link: https://michaelvictorbowman.com/

    I would like to change it to resemble the layout seen on this site,
    Link: https://dennisetaylor.org/
    when viewed in responsive mode at the same resolution. This layout seems more efficient for use on mobile devices, with the site title in the menu bar and the menu moved over to the left.

    Is it possible to do this with CSS? If so, could you tell me where to start? I’ve examined the second site but can’t figure out how I’d make these changes (assuming they’re possible).

    Cheers

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Guido

    (@guido07111975)

    Hi,

    This is not possible with CSS only because the menu is part of the header section and the page title is not.

    So for that you should change whole structure of the top section of the site. Meaning you should create a child theme, include file header.php there and add the page title next to the menu. And then add some CSS to hide the page title in normal view and make it display in mobile view… quite some work!

    Guido

    Thread Starter MRanson

    (@mranson)

    Ok, guess I won’t be doing that, then! Thanks for the explanation. No criticism of the design is implied. It’s only that the suggested layout seemed a more efficient use of space on a small screen.

    Is it possible to reduce the font size of the site title in mobile view, without affecting the desktop version?

    Theme Author Guido

    (@guido07111975)

    Hi,

    Unfortunately quite some work.

    About the site title.. Yes, this is possible using some custom CSS. Example:

    
@media screen and (max-width:767px) { 
	.logo h1 {font-size:1.45em;}
}

    Guido

    Thread Starter MRanson

    (@mranson)

    Hi Guido,

    That worked well, thanks. I’ve used it to modify the other headers and post excerpts as well.

    In mobile view there’s still a lot of white space above the site title, h1. The selector for this space is just ‘html’ and it has an important! tag. It’s the presence of that important! tag that makes me hesitate to start messing about with margins in order to make this white space go away.

    What does this ‘html’ area do, if anything? Why has it got an important! tag? Can I hide it?

    Cheers

    Theme Author Guido

    (@guido07111975)

    Hi,

    The important tag is not part of my theme, it must be from something else such as a plugin that has it’s own styling.

    You can try to reduce the line hight of the h1 heading:
    .logo h1 {line-height:1;}

    Guido

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Changing appearance of site title and header in responsive mode’ is closed to new replies.

Tags