Home Forums Weaver Xtreme Theme Header question

This topic contains 7 replies, has 2 voices, and was last updated by  scrambler 1 week, 6 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #59851

    bplumme
    Participant

    When I go under General and add a Site Title: Delphos City Schools it shows up next to my navigation. How do I prevent it from showing there?

    Also, when people are viewing on tablet or mobile I want the Delphos City Schools – Excellence Today; Success Tomorrow; One Student at a Time! to show. (The part that is under the navigation). I probably want the font to be slightly smaller. Right now Delphos City Schools is showing but that is from my first question and I would like that to go away.

    https://cmgroupinteractive.com/delphoscityschools/

    #59852

    scrambler
    Moderator

    1) You have checked the option to Add the site title to the left of the menu.

    In legacy the option is in Main options > menus > Primary Menu bar > Add Site Title to the left

    Or Customize > Layout > Menus > Add Site Title to Left of primary

    2) Delphos City Schools – Excellence Today; Success Tomorrow; is your Header HTML. If it disappears on mobile, then its Hide Area option must be set that way.

    Go to Legacy Admin > Main Options > Header > Header HTML > Hide Area option and set it to show on all devices

    Or Customize > Visibility > Header > Hide Header HTML option

    #59854

    bplumme
    Participant

    Hi, I did #1 and that worked

    I did #2 and I still don’t see when I am viewing on smaller screen size.

    #59855

    scrambler
    Moderator

    You moved the area with a negative top margin, but it is under the menu on mobile

    Add the rule below to the theme Global Custom CSS Rule box

    #branding {z-index:2000;}

     

    #59856

    bplumme
    Participant

    Thanks, that works…but is there a way to make the text smaller. It runs over the logo and you can’t read the second sentence since it is overlapping, only when viewing on the phone.

    #59858

    scrambler
    Moderator

    yes, but you need to add a different class to each div, so you can target each line separately with a CSS rule

    <div class="mytxt1" style="font-size: 40px;font-family: lato;text-shadow: 2px 2px 5px black;">Delphos City Schools
    </div>
    <div class="mytxt2" style="font-size: 22px;font-family: lato;line-height: .2;font-style: italic;text-shadow: 2px 2px 5px black;">Excellence Today; Success Tomorrow; One Student at a Time!
    </div>

    Then add the rule below to change the font size on phone

    .is-phone .mytxt1 {font-size:30px;}
    .is-phone .mytxt2 {font-size:15px;}

     

    #59862

    bplumme
    Participant

    That doesn’t seem to work. I adjusted what you sent to the below and the second text2 overlaps…plus the photo is now cut off at top. I have attached a screenshot.

    #branding {z-index:2000;}
    .is-phone .mytxt1 {font-size:15px;line-height: normal;}
    .is-phone .mytxt2 {font-size:10px;line-height: 1.6;}

     

    #59863

    scrambler
    Moderator

    You need to add important to the rule as your other CSS is inline

    .is-phone .mytxt1 {font-size:15px !important;line-height: normal !important;}
    .is-phone .mytxt2 {font-size:10px !important;line-height: 1.6 !important;}

    Or remove the Inline styles and use the classes to do ALL the styling

    .mytxt1 {font-size: 40px;font-family: lato;text-shadow: 2px 2px 5px black;}
    .mytxt2 {font-size: 22px;font-family: lato;line-height: .2;font-style: italic;text-shadow: 2px 2px 5px black;}

    .is-phone .mytxt1 {font-size:15px;line-height: normal;}
    .is-phone .mytxt2 {font-size:10px;line-height: 1.6;}

    And if you want to change the style for all mobile devices (smalltablets and phones), use the class .is-mobile instead of .is-phone

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.