A few formatting questions

This topic has 7 replies, 2 voices, and was last updated 6 years by Radu.

Author
May 8, 2018 at 20:51 #197132

robynmg227
Participant
Hello,

I have some questions about how I can further customize the theme. We are using the “center logo” header layout:

1) Can I ‘box’ the header content? Right now, the ‘boxed’ layout applies only to the body of the pages, but the header stays full-width. I’d also like to have a 15px margin above the header.

2) Can I place text links in the top area where the social shares go? (instead of the social shares.) Is it possible to customize the text so that the center link (there are 3) has a pink background?

3) How do I format the primary navigation (in “Primary Menu” position):
- to increase the font size
- move the “search” icon further to the right
- have a pink line beneath the name of the page the visitor is currently on (in primary nav)
- hover changes text color from #303858 –> #c02f7b ?
4) Lastly, we are having a display issue when viewing the website on mobile. The attached screen shot shows how the logo covers the top of the page content, instead of being above it.

I have switched the site back to “left logo and menu” header layout until we can resolve #4 above.

Thank you very much in advance for any assistance you’re able to offer.

Attachments:
You must be logged in to view attached files.
May 9, 2018 at 18:38 #197254

Radu
Moderator
Hi,

1. At this moment the header and whole site it’s boxed see the screenshot

2.

You will have to install and activate child theme first then copy this file : wp-content/themes/kleo/page-parts/general-header-section.php to child theme wp-content/themes/kleo-child/page-parts/general-header-section.php

Then open the file in child and see the screenshot

OR if you want to add link instead the top menu comment the echo $top_menu; and add below you links.

3a.

The css will be added to wp-admin -> theme options -> General settings -> Quick CSS
COPY CODE
```
.navbar-nav>li>a {
    font-size: 20px !important;
} 
```
3b. at this moment no search on the page

3c. It’s like that by default did you had make any changes (css) there ?

3d. hover text color
COPY CODE
```
.navbar-nav>li>a:hover {
    color:red !important;
}
```
4. Looks as it should you had solved?

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 9, 2018 at 18:46 #197257

robynmg227
Participant

Hi Radu,
Thanks for your help! I will go through and do the things you suggested.

The site is currently set up with a DIFFERENT header to what we WANT to use because when we used the one we do want (centered logo, centered nav below), the issue happened with the logo going over the text. (item 4)

Also, the header is boxed, but the white background extends edge-to-edge. (#1)

May 9, 2018 at 19:45 #197266

robynmg227
Participant

Can we make the footer and socket boxed, too? (left/right margins to match the body content?)
May 10, 2018 at 16:31 #197342

Radu
Moderator
Hi,

Use this css
COPY CODE
```
div#footer {
    max-width: 980px;
    margin: 0 auto;
}
```
Change the 980px with your value.

On my resolution it’s already boxed but for lower resolution use the css

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?
May 10, 2018 at 16:34 #197343

Radu
Moderator
Also for the header use this css to make it narrow
COPY CODE
```
div#header {
    max-width: 980px;
    margin: 0 auto;
}
```
For main content
COPY CODE
```
div#main {
    max-width: 980px;
    margin: 0 auto;
}
```
socket
COPY CODE
```
 #socket {
    max-width: 980px;
    margin: 0 auto;
}
```
Or all toghether in one rule
COPY CODE
```
#header ,#main, #footer, #socket {
    max-width: 980px;
    margin: 0 auto;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?
May 10, 2018 at 21:27 #197388

robynmg227
Participant

Thank you Radu!

May 11, 2018 at 15:46 #197423

Radu
Moderator

You’re welcome
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts