Home Forums Weaver Xtreme Theme Header

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #69356
    merlojh
    Participant

    Sorry but need to change the header again on this site https://www.danedwardsinvestments.com/

    he wants the text on the left and the button on the right John

    #69358
    scrambler
    Moderator

    Side by side on the same level?

    #69359
    merlojh
    Participant

    Yes on same level

    #69360
    scrambler
    Moderator

    Changes in the Header HTML Area HTML

    • It looks like you messed up the HTML inside the Header HTML area, I see a header HTML div which causes invalid HTML ID duplication (in yellow) if so that needs to be removed.
    • We also need to remove the clear property on the button HTML (in Blue)
    <div id="header-html" class="rounded-all font-inherit align-center">
    <div class="toptext">
    <a id="headerlink" href="http://www.danedwardsinvestments.com/"><center>Dan Edwards Investments Helping Women in Transition Become Financially Secure</center></a><br>
    </div>
    <div style="text-align: center;clear: both;"><a class="button" href="http://www.danedwardsinvestments.com/contact/">Schedule an appointment</a>
    </div>
    </div>

    After you make the changes, the HTML code should look like below

    <div class="toptext">
    <a id="headerlink" href="http://www.danedwardsinvestments.com/"><center>Dan Edwards Investments Helping Women in Transition Become Financially Secure</center></a><br>
    </div>
    <div style="text-align: center;"><a class="button" href="http://www.danedwardsinvestments.com/contact/">Schedule an appointment</a>
    </div>

    Then we need the following CHANGES in the EXISTING CSS
    Add the float, width and margin for the toptext rule below (in yellow)

    .toptext {float:left;width:60%;margin:0 auto;font-size: 60%; font-family: Times, serif;}

     

    In the EXISTING rule below, CHANGE the padding left and right from 15% to a fixed value like 15px

    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw);padding-right:15%;padding-left:15%;padding-top: 30px;max-width:1000px;display:block !important;}

    Please go slow, pay attention to the CSS syntax, and reread my post twice before and after the changes….

    #69363
    merlojh
    Participant

    Thanks that worked!!! John

    #69372
    merlojh
    Participant

    Where or how would I change the width of the blue header box? John

    #69373
    scrambler
    Moderator

    You change the max width value in your CSS rule below

    #branding #header-html {display:block;overflow:hidden;max-width:1000px;}

     

    #69387
    merlojh
    Participant

    Did not work? changed it to 3000px no change? John

    #69388
    scrambler
    Moderator

    May be a cache issue, or else No idea what you did as the value has not been changed.

    I did notice you duplicated the rule in two different places (see in yello and blue below)

    You should remove the BLUE one and change the value in the YELLOW place

    /* HOME PAGE */
    .narrowcol { padding-right:10%; padding-left: 10%; }
    #mybackground-one { background-color: gray; padding: 15px 15px 15px 15px; }
    .mydiv1 {padding:10px; width:100%; background-color:#9999; box-sizing:border-box; }
    .hplink { padding-left: 3%; }
    .center { text-align: center; }
    .page-id-491 .fluid-width-video-wrapper { width:60%; }
    .page-id-491 .fluid-width-video-wrapper {margin:0 auto;}
    .bgcolor {
    width: 8%;
    height: 100%;
    background-color: green;
    padding: 5px 5px 5px 5px;
    text-align: center;
    }
    #branding #header-html {display:block;overflow:hidden;max-width:1000px;}

    .is-mobile .bgcolor {font-size: 80%; width: 20%;}
    .colone { width: 40%;}
    .coltwo {width: 20%;}
    .colthree {width: 40%;}
    .mypar1 {text-align:center; padding-bottom: 125px; font-size: 200%; margin-top: -25px;}

    .colorbg { background-color: #4874AC; border-radius: 3%; color: white; padding-bottom: 2%; padding-top: 2%; }

    /* FONTS */
    h3 { color: #4874AC; }

    /* ABOUT PAGE */
    #aboutcol { width: 80%; padding-left: 10%; padding-right: 10%; }
    .smallcol { width: 20%; }
    .largecol { width: 80%; }

    /* INVESTMENT PAGE */
    #investmentcol { width: 80%; padding-left: 10%; padding-right: 10%;}

    /* CONTACT PAGE */
    .wpforms-form { background-color: #CCCCCC; padding: 15px 15px 15px 15px; border-radius: 3%; }
    #contactcol { width: 80%; padding-left: 10%; padding-right: 10%; }

    /* TEXT FOR HEADER */
    #headerlink { color: white;}
    .toptext {float:left;width:60%;margin:0 auto;font-size: 60%; font-family: Times, serif;}
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw);padding-right:15px;padding-left:15px;padding-top: 30px;max-width:1000px;display:block !important;}

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.