Logo/Description/Content Customization
-
I am customizing the Corporate theme and have a few issues.
First, they want text added to the right of the logo. I added the Site Description text but it is too low. Once I changed the position to absolute I could place it perfectly, but obviously this didn’t do well with resizing the browser or viewing on a tablet or phone.
Second, I’ve added position: absolute for the site-top-content section as they would like the logo and header text to be at the same level inside a small banner. Looks great until I resize the browser small for a smartphone when the text and logo collide.
Help!! (& thanks in advance for your time :) )
The blog I need help with is: (visible only to logged in users)
-
Hi, position absolute breaks the relationship of the element with the rest of the elements in the page, so it basically floats free above all other elements, so yes, it is not an optimal solution in many cases.
Not sure exactly where you want the site description to be, but first off remove the “top” and “left” declarations from the .site-description rule you have in the custom CSS and then add the following Media Query. Using position relative, we can specify movement from the current element position, but it essentially still keeps its relationship to the other elements, just offset from where it was. You can adjust the -40px value as desired to get the alignment you want.
@media screen and (min-width: 800px) { .site-description { position: relative; top: -40px; } }On the second issue with site-top-content, let’s try this.
@media screen and (min-width: 800px) { #site-top-content { background-color:#77222d; padding:0; position:absolute; font-size:14px } }It does what you want at 800px and wider screens, but then allows the original design to come back into play on screens narrower than 800px.
-
-
- The topic ‘Logo/Description/Content Customization’ is closed to new replies.