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

  • Author
  • #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.
    #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
    #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)

    #197266
     robynmg227
    Participant

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

    #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
    #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
    #197388
     robynmg227
    Participant

    Thank you Radu!

    #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
Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?