Reposition site description and social icons

[wire12xuParticipant]

Just started building my site with Eclipse. Kind of getting the hang of it. One thing that is bugging me seems fairly basic but I can’t figure it out: I want the Title of the website and all the menus to be at the very top of the page. How can I move the site description and social icons below the website title?

http://www.geologyhikes.com

[wire12xuParticipant]

Figured it out…….

.site-title {
position: relative;
top: -70px;

}
#top_header .top-head-description {
position: relative;
top: 30px;
}

.default-icons a.symbol{
position: relative;
top: 35px;
}

#navigation {
position: relative;
top: -80px;
}

[wire12xuParticipant]

Spoke too soon. I adjusted the CSS as below and it works the way I want on desktops on on mobile phone in landscape mode. But if holding the phone or tablet vertically in portraite mode the title and title description overlap and the navigation menu icon is below the social icons instead of being above the icons…..anyone?

#top_header .top-head-description {
margin-top: 8px;
color: #fff;
font-size: 13px;
line-height: 1em;
position: relative;
top: 40px;
}

.default-icons a.symbol{
background: transparent;
border:0;
border-radius:0;
text-shadow: none;
height: 20px;
width: 20px;
margin: 0;
font-size: 20px;
margin: 0 0 0 5px;
position: relative;
top: 35px;
}

#navigation {
margin: 35px 0 5px 0;
position: relative;
top: -80px;
}

header#cc-header h2.site-title {
font-size: 20px;
font-weight: 600;
margin-top: 1px;
line-height: 47.5px;
position: relative;
top: -70px;
}

[Manisha (CyberChimps Team)Keymaster]

Hi,

Thanks for writing to us.

As per the design of the theme, social icons are supposed to be on top (before site title and menu). Please add all your CSS in between the following brackets and let me know if mobile view looks good to you.

@media only screen and (min-device-width: 768px){
*Your CSS here*
}

Feel free to drop a line if this does not solve your problem or you’re expecting something else.

Regards,
Manisha Rajput.

[wire12xuParticipant]

I gave up on repositioning the title and description and reverted it back to how you said the template was designed for. But now I don’t see the site description and I find on the phone that there is too much space between the site title and blog post title and the menu icon.

1. How do I get the site description to show up.
2. How do reduce the space above and below the site title.
3. On the mobile how do I get the site title and menu icon to be on the same line

Here’s what I have in mind….before (now) and after….

http://geologyhikes.com/mobile.jpg

Thanks in advance!

[Manisha (CyberChimps Team)Keymaster]

Hi there,

Solution to your queries:

1. How do I get the site description to show up?
Solution:
a. Go to Appearance -> Customize -> Site Identity.
b. Check ‘Display Site Title and Tagline’ checkbox.
c. Click on publish button and check the site (Check PFA).

d.

——————————————————————-
2. How do reduce the space above and below the site title?
Solution: Add the below CSS to additional CSS section in Appearance -> Customize

#navigation {
    margin: 0 !important;
}
@media only screen and (min-device-width: 768px){
  header#cc-header h2.site-title {
    line-height: 10px !important;
  }
}

——————————————————————-

3. On the mobile how do I get the site title and menu icon to be on the same line?
Solution: Add the below CSS to additional CSS section in Appearance -> Customize

@media only screen and (max-device-width: 768px){
  header#cc-header h2.site-title {
    line-height: 20px !important;
  }
  div#main_header .container .span6 {
    width: auto !important;
    display: inline-block;
  }
  div#main_header .container .row-fluid .span6:nth-child(2) {
    float: right;
  }
}

Hope this will solve all your issues.

Thank you.

[wire12xuParticipant]

Thanks Manisha! That worked.

[Manisha (CyberChimps Team)Keymaster]

Welcome 🙂