Bloggy theme CSS – center site-title, tagline, and mainnav on top of page

lookingupphoto · Member · Oct 1, 2014 at 12:59 pm
Copy link

Add topic to favorites
Hi all

Using Bloggy theme…..Trying to center the site-title on top of the page. Under that I would like to center the tagline, and under that I would like to center the mainnav.

Site-title
Tagline
Mainnav
Header image
Blog posts

Currently my tagline seems to be hidden, as it’s not visible at all.

Many thanks!

Karen

The blog I need help with is lookingupphotography.com.

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Oct 1, 2014 at 1:18 pm
Copy link
I’m not sure how reliable all of this code is so try it out on a few browsers and devices but this should do the job:
```
#toppart {
  display:table;
  width:100%;
  padding:30px 0 20px;
}

#toppart #mainnav {
  max-width:100%;
  float:none;
  text-align:center;
  display: table-row-group;
  margin-bottom:20px;
}

#menu-menu-1 {
  display:inline-block;
}

#site-title {
  max-width:100%;
  text-align:center;
  display: table-header-group;
}
```
As an aside, I would definitely recommend changing your site title to the actual title (similar to your domain) and putting what you currently have in your title into the description.
lookingupphoto · Member · Oct 1, 2014 at 11:45 pm
Copy link
That worked perfectly, thank you!

The description (tagline) isn’t showing and I can’t figure out why. Could it be “hidden”, and if yes is there a way to get it to be visible?

Thanks again!

Karen
thesacredpath · Member · Oct 2, 2014 at 2:39 am
Copy link
Hi, first you have a very, very small font, and the body and heading color rule you have is controlling the color of the tagline. Find the following in your custom CSS and add a color declaration, as I have in my example. You will also most likely want to adjust the font size.
```
.wf-active #site-title h2 {
    color: #000;
    font-size: 0.1em;
}
```
lookingupphoto · Member · Oct 2, 2014 at 4:04 pm
Copy link
Thank you!

I changed it to this, but the font is still soooo tiny, you can’t read it. ??

.wf-active #site-title h2 {
color: #453834;
font-size: 1000em;
}
hallluke · Member · Oct 2, 2014 at 4:09 pm
Copy link
You have the original code (setting it to 0.1em) still in your custom CSS and seeing as it comes after the new code it takes precedence.

Try removing the original block of code and changing the new one to 1em (1000em will create writing something like 20 times taller than most monitors).
lookingupphoto · Member · Oct 3, 2014 at 9:06 pm
Copy link
That worked, thanks again!

No items found.