A few formatting questions

[robynmg227]

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.

[Radu]

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 ?

[robynmg227]

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)

[robynmg227]

Can we make the footer and socket boxed, too? (left/right margins to match the body content?)

[Radu]

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 ?

[Radu]

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 ?

[robynmg227]

Thank you Radu!

[Radu]

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