WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] site-title and site-description on one line (12 posts)

  1. webdisaster
    Member
    Posted 1 year ago #

    BIQ

    I would like the site description to show on the same line as and directly to the right of the logo, but no matter how I edit the style I cannot seem to get this to happen. It's probably an easy fix but I can't seem to get it.

    branding is 75% and menu is 25%, FYI. I thought that it was a width thing at first, but no matter how I play with the widths it doesn't matter. I think is probably a float issue; I can never seem to get CSS positioning correct.

    This forum post seemed promising, but when I tried that, it put the site-description behind my logo and made the logo much larger than the constrained 60% it is now. But it's a clue...

    Thanks in advance!

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Have you a Child Theme or Custom Style/CSS plugin?

  3. webdisaster
    Member
    Posted 1 year ago #

    Nope, I've just been editing the theme live. I hadn't even realized Child Themes were possible until after I started hacking on it.

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Forum users aren't allowed to advise help while editing parent themes.
    Once you have either, let us know for we can help you.

  5. webdisaster
    Member
    Posted 1 year ago #

    Ah, OK. I will reinstall the theme and create a child theme.

    Thanks!

  6. Dave
    Member
    Posted 1 year ago #

    After creating the Child Theme as suggested, enter this in it:

    #site-description {
        clear: both;
        color: #AAAAAA;
        font-size: 1.33333em;
        font-weight: normal;
        line-height: 1.5em;
        margin: 0;
        text-transform: none;
        width: 40%;
    }

    ...and alter it to read:

    #site-description {
        clear: none;
        float:right;
        color: #AAAAAA;
        font-size: 1.33333em;
        font-weight: normal;
        line-height: 1.5em;
        margin: 0;
        text-transform: none;
        width: 40%;
    }

    This should allow the description to float to the right of the site title. You may have to add a margin to the top to lower it to look more in line with the site title.

  7. webdisaster
    Member
    Posted 1 year ago #

    Thanks. I reinstalled the theme, made a child theme, re-made my modifications so now I should have a proper theme.

    I made the suggestion from RoseAndMoon above but no luck. I tried some additional things and still can't get it. Here's my header and menu CSS:

    * Header
    -------------------------------------------------------------- */
    #header {
    	clear: both;
    	float: left;
    	width: 100%;
    	margin: 10px 0 10px 0;
    }
    #branding {
    	float: left;
    	width: 75%;
    	overflow: hidden;
    }
    #site-title {
    	font-size: 3em;
    	line-height: 1em;
    	font-weight: bold;
    	margin: 0 0 5px 0;
    	word-wrap: break-word;
    }
    #site-title a {
    	color: #222;
    	border-bottom: none;
    }
    #header img { max-width: 60%; }
    #site-description {
    	float: right;
    	font-size: 1.333333333333333em;
    	font-weight: normal;
    	line-height: 1.5em;
    	margin: 0;
    	color: #aaa;
    	text-transform: none;
    	width: 91.48936170212766%;
    	clear: none;
    }
    
    /* Primary menu
    -------------------------------------------------------------- */
    #menu-primary {
    	font-size: 1em;
    	width: 25%;
    	margin: 20px 0 0 0;
    	float: right;
    	position: relative;
    	z-index: 99;
    }
    #menu-primary .menu { float: right; }
    #menu-primary .menu ul { float: right; }
    #menu-primary li {
    	display: block;
    	float: left;
    	min-height: 30px;
    }
    #menu-primary li a {
    	line-height: 1em;
    	margin-left: 3.5em;
    	display: block;
    	font-weight: bold;
    }
    #menu-primary li.current-menu-item a { color: #aaa; }
    #menu-primary li li, #menu-primary li li.current-menu-item li {
    	clear: both;
    	float: none;
    }
    #menu-primary li li:first-child, #menu-primary li li.current-menu-item li:first-child { border-top: none; }
    #menu-primary li li a, #menu-primary li li.current-menu-item li a {
    	font-size: 1em;
    	font-weight: normal;
    	text-transform: none;
    	color: #888;
    	margin: 0 5px;
    	padding: 12px 15px;
    }
    #menu-primary ul li a:hover, #menu-primary li ul li a:hover { color: #222; }
  8. Dave
    Member
    Posted 1 year ago #

    The #branding is 75% of the header.
    The menu is 25%.
    Within the #branding, there are two elements: #site-title and #site-description.

    When I looked at your css before with Firebug, the #site-title was 60% and the #site-description was 40%.
    For some reason, that is all changed.
    Your #site-description now has a width: 91.48936170212766%; ??

    Make the #site-title 60% and the #site-description 40%.
    Leave the #site-description float right.

  9. webdisaster
    Member
    Posted 1 year ago #

    Ah, thanks! since I reinstalled the theme that went back to the default and I missed it. Looks like I got it now, but I'll need to play with the vertical placement to get it right.

    THANKS!

  10. Dave
    Member
    Posted 1 year ago #

    Just looked on Firebug and you still need to make the #site-title 60% wide so that the 40% #site-description will fit beside it.

  11. webdisaster
    Member
    Posted 1 year ago #

    Yeah, I had a conflicting 60% definition in an img id, so I took that one out. I just switched it back now. Still need to do the vertical but i have to go out for a couple hours.

  12. webdisaster
    Member
    Posted 1 year ago #

    got it. Needed a float:left in the site-title div as well.

    Thanks for all your help! I had never heard of firebug but I'll use it from now on.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.