using CSS in responsive theme

nettynat · Member · Apr 16, 2017 at 9:02 am
Copy link

Add topic to favorites
Hi there!

I would like to do four modifications with my site layout (footcareforall.com) using CSS editor. I am using the responsive theme.

1. I want to have logo and Web site title with tagline sit next to each other (logo on the left side and title with tagline on the right, tagline been under
title)
2. Change my menu’s background color
3. Place menu items in the centre of the page.
4. Remove menu items (“Home”, “About”, “Blog”) in the top right corner of the website.
( I have already valid menu with these items under Logo and Website title with tagline)

In order to solve the first problem I tried to use the following statement:
a.site-logo-link { display: inline; float: left; }
This statement indeed placed logo to the left of Title and tagline, but Title instead of been displayed in one line now takes 3 lines:
“Foot” in the first line, “care” in the second and “for all” in the third.
Tagline takes 2 lines as well “Your path to” in the first and “healthy feet and nails” in the second.
Besides that second half of the tagline located under the logo (not to the right of it)

In order to change menu background color I am using the following statement:
ul#menu-menu-1.menu {

background-color: #8000;
}

but it doesn’t take effect

In order to fix third problem

I am using the following statement

ul#menu-menu-1.menu {

text-align: center;
}
But it doesn’t take effect

I will appreciate any help you can give me with either of these issues!

Thanks,
Andrei

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · Apr 16, 2017 at 9:34 am
Copy link
Hello @nettynat,
Use this CSS codes to:

1. I want to have logo and Web site title with tagline sit next to each other (logo on the left side and title with tagline on the right, tagline been under
title)

1. Move the title to the right of the site logo
```
.site-name {
    display: inline-block;
    margin-left: 15px;
    margin-top: 20px;
}
```
2. Fix the tagline under the title
```
.site-description {
    padding-left: 120px;
}
```
2. Change my menu’s background color
```
ul#menu-menu-1 {
    background: #3d1133 !important;
}
```
3. Place menu items in the centre of the page.

To do this just use flexbox in the above CSS code:
```
ul#menu-menu-1 {
    display: flex;
    justify-content: center;
    background: #3d1133 !important;
}
```
4. Remove menu items (“Home”, “About”, “Blog”) in the top right corner of the website.

There are 2 ways to remove this:
i. Using CSS
```
ul#menu-menu {
    display: none;
}
```
ii. Using Site Customizer
Open the customizer by going to My Sites → Customize(Beside the Themes option) or just click here: https://wordpress.com/customize/. On the sidebar of the Customizer, click on Menus >. Now click On Menu Locations >. Remove the menu selection from the Top Menu Dropdown. Finally, click Save & Publish.

Hope this helps :)
nettynat · Member · Apr 16, 2017 at 6:18 pm
Copy link
Hello @otpidusprime,

Thank you very much for your help!

I implemented your suggestions and have one question.
Site title and tagline currently on the right side of the logo,
but they are shifted down in respect to the logo. I want them to be horizontally aligned with
the Logo.

I tried to change “margin-top” value in the below code.
It doesn’t take effect
only “margin-left” control works: it moving title to the right or left (horizontally)

.site-name {
display: inline-block;
margin-left: 35px;
margin-top: 10px;
}

I tried to change “margin-top” control in the logo CSS code,
but this moves up and down logo along with title and tagline (all three are moving vertically together)

a.site-logo-link {
display: inline-block;
margin-left: 15px;
margin-top: 35px;
}

Besides that, please, let me know how to change Title and tagline font using Font Menu
(not CSS) if that is possible.

Thanks,
Andrei
otpidusprime · Member · Apr 16, 2017 at 7:03 pm
Copy link
Okay, here’s the fixed code:
1. First add float left to the logo CSS:
```
a.site-logo-link {
    display: inline-block;
    margin-left: 15px;
    margin-top: 35px;
    float: left;
}
```
2. Then, use this CSS to fix the position of the title+tagline:
```
.site-name {
    display: inline-block;
    margin-left: 35px;
    margin-top: 52px;
}
```
3. Align tagline with the title:
```
.site-description {
    padding-left: 155px;
}
```
If you just want to change the font of the title and the tagline you cannot do that with the Font Menu of the Customizer, because if we change the header and the body fonts to change the font of the title and the tagline it will be applied to the entire site. You will have to go with CSS for this.

Hope this helps :)
nettynat · Member · Apr 17, 2017 at 5:07 am
Copy link
Hello @otpidusprime,

Thank you very much again for your help!
Site title and tagline are now aligned to the logo.

I tried to change Site title font by adding the following line ” font-family: Arial;”
to the site name CSS code:
.site-name {
font-family: Arial;
font-size: 40px;
display: inline-block;
margin-left: 175px;
margin-top: 52px;
}
but actual Font of the Title didn’t change after I replaced Arial for any other font (for example Tahoma, Verdana, Helvetica, sans-serif)
Besides that I tried to increase Logo size by adding the following statements:
width: 140px;
height: 140px;
to the site-logo CSS code:
a.site-logo-link {
display: inline-block;
margin-left: 15px;
margin-top: 35px;
width: 150px;
height: 150px;
float: left;
}
but this didn’t change Logo size
Please, help me with the above problems.

Thanks,
Andrei
otpidusprime · Member · Apr 17, 2017 at 9:40 am
Copy link
1. To change the font of the Site Title:
```
.site-name {
    font-family: 'Tahoma', Segoe UI, sans-serif;
    font-size: 40px;
    display: inline-block;
    margin-left: 175px;
    margin-top: 52px;
}
```
This code will use the Tahoma font for the Site Title, if Tahoma isn’t available, it will switch to Segoe UI, and if Segoe UI isn’t available it will switch to a basic sans-serif font.

2. To change the size of the logo:
The logo size isn’t changing because of this CSS:
```
.site-logo {
    width: auto;
    max-width: 300px;
    height: auto;
    max-height: 100px;
}
```
The max codes are not letting the size to change, so to change the logo size,
i. First change the height and width of the anchor tag that’s wraps the logo image:
```
a.site-logo-link {
    display: inline-block;
    margin-left: 15px;
    margin-top: 35px;
    width: 150px;
    height: 150px;
    float: left;
}
```
ii. And, then change the logo image size, by disabling the max codes:
```
.site-logo {
    width: 150px;
    height: 150px;
    max-height: none;
    max-width: none;
}
```
nettynat · Member · Apr 17, 2017 at 4:46 pm
Copy link
Hello @otpidusprime,

Thank you very much for your help again!
It works!

Thanks,
Andrei
otpidusprime · Member · Apr 17, 2017 at 4:54 pm
Copy link
@nettynat glad i could help :)
nettynat · Member · Apr 21, 2017 at 4:42 am
Copy link
Hi there!
I would like to do four more modifications with my site layout (footcareforall.com)
1.On my home page there is a picture, which got cropped from the original size
Please, let me know how to make this picture displayed in the original size (not cropped)
I know that my theme (Responsive) is set to hard crop the image to be 440 wide x 300 tall pixel size.
I scaled down original image, but it is still cropped the same way on the page.
2. How to increase font size for the Menu Items on the menu bar and to change their font?
3. How to use fancy Fonts (more artistic) for the titles of the pages.
4. How to display phone number with the phone icon above menu bar to the right of the Site Title

Thanks,
Andrei
nettynat · Member · Apr 21, 2017 at 8:10 pm
Copy link
Hi there,

I will start new thread with the above questions
thread name will be
“using CSS to change image size and font size at the top menu”
and will close this thread

Thanks,
Andrei

No items found.