Need help? Check out our Support site, then


Getting header image, site title and tagline to display next to each other

  1. My blog/website is drbjj.wordpress.com.

    Can anyone help me try to get the header image with the site title and tagline to display next to each other? In other words, I would like the Site Title: Downriver Jiu Jitsu and the Tagline: 13645 Northline to be next to the header image instead of underneath it. I am using the Motif theme. I want to upgrade and have the custom css option but don't even know if this will help me do this....any help or comment is appreciated.

    The blog I need help with is drbjj.wordpress.com.

  2. Hi,

    I saw that you already have the Custom CSS upgrade. You can add the following CSS to get what you're aiming for:

    @media screen and (min-width: 600px) {
    	#masthead .site-title {
    		font-size: 30px;
    		display: inline-block;
    		padding-top: 40px;
    	}
    
    	#masthead .site-description {
    		display: inline-block;
    		margin-left: 30px;
    	}
    }
  3. Hi,
    I was playing around and found some CSS on a forum and plugged it in and it worked!!! I still really don't have any idea what I am doing though. Just getting lucky, I guess. Now I am looking to put my social media widgets at the top too. Any way I can do that? I would like this to be in addition to what I already have at the top of the page currently. They are currently located at the bottom of my page in the footer widget. Thanks so much for responding to my first post!!!
    Still running motif theme.
    Blog site is downriverbjj.wordpress.com

  4. thesacredpath
    Staff

    Hi there, the site you reference, downriverbjj.wordpress.com , does not exist. This was worked out on the site referenced in your original posting: http://drbjj.wordpress.com/. It got a little long and there are a good number of media queries to control how things look and flow as the device/browser window width gets narrower, but this should work on everything all the way down to a phone in portrait orientation without anything overlapping.

    .site {
        position: relative;
    }
    #text-3 {
        position: absolute;
        right: 30px;
        text-align: right;
        top: 65px;
    }
    #text-3 .widget-title {
        display: none;
    }
    
    @media screen and (max-width: 768px) {
        .site-branding {
           max-width: 500px;
        }
        #text-3 {
            top: 90px;
        }
    }
    
    @media screen and (max-width: 630px) {
        #text-3 {
            max-width: 50px;
            top: 10px
        }
    }
    
    @media screen and (max-width: 599px) {
        .site-branding {
            max-width: 400px;
        }
        #text-3 {
            top: 70px;
        }
    }
    
    @media screen and (max-width: 450px) {
        .site-branding {
            max-width: 80%;
        }
        #text-3 {
            top: 120px
        }
    }
  5. @thesacredpath,

    Thank you!

    But now how do I put the URLs and link them to the widget?
    I manage to copy and paste the CSS you gave me but don't know where to put the URLs in. I will try plugging them in where it seems appropriate and see if it works. And sorry, yes. My website is drbjj.wordpress.com. It was late at night and I was working on this site.

  6. The previous CSS I used attach the URLs and link them to my widgets was this where I replaced my URL in between the brackets []

    <div> <img title="Facebook" src="[image URL for Facebook icon]" alt="Facebook" width="35" height="35" /> <img title="Email" src="[image URL for Email icon]" alt="Email" width="35" height="35" /></div>

  7. I guess it just took a minute to refresh. It is working now, links and all. Thank you so much!!

  8. thesacredpath
    Staff

    You are welcome.

  9. Hello
    I too am using the Motif theme with custom CSS and am looking to have a logo appear next to the site title. The code that hafizr posted does not align the logo next to the text. @Drbjj1982 - do you know what the correct code was that you used to make this work? Thanks !

    http://rootnotehealing.com

  10. @mellocapp, I'm seeing your logo incorporated into your header image, I think. Is that working for you, or are you looking at doing a different image and using the text-based site title?

  11. @thesacredpath Thank you. I think this current format (logo incorporated in header image) will work for me. Initially when I wrote my question I did like what OP had done with his header. My main concern is having my image header translate well when viewing on a mobile platform. So far it seems to be working. I'll start a new topic if I have any further questions about the header.

  12. Yes, please do, and you are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic