Home Forums Weaver Xtreme Theme Header area

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #62999
    merlojh
    Participant

    On this website https://www.danedwardsinvestments.com/ I would like to put a button on the right side of the header text can this be done? The header itself gets really small in mobile view is there a way to make it larger in this view? Thanks John

    #63000
    scrambler
    Moderator

    Right now your text is part of the image so it will scale with the image when the browser get small, and it will be hard to make any button on top of the image keep a fixed relative position to the text.

    If you don’t want the text to scale with the image, may be it would be better to use a header image with only the shaded background. Then for the text and button you have two options.

    If text and button need to be together, create the text and button using the Header HTML Area, then we can use custom CSS to move it over the header image and center it

    If the text should be in the center and the button on the side. You could use the site Title  and Tagline for the text (we can fine tune positioning with Custom CSS, and create the button with HTML placed in the Header HTML area, which we will move in the place of your choosing using custom CSS

    #63001
    merlojh
    Participant

    Thanks I will try that and get back if need more help Thanks John

    #63022
    merlojh
    Participant

    Got text and button in header area but still not sizing right in mobile view  Thanks John

    Home

    #63023
    scrambler
    Moderator

    Good, now you need to create CSS to change size and positioning based on devices sizes
    You can use one of two methods:

    1. Change styling in steps with rules like below
      @media and (max-width:1000px) {
      #header-html {font-size:70%;top:15%;}
      .button {padding:5px 24px;}
      }
      @media and (max-width:700px) {
      #header-html {font-size:60%;top:5%;}
      .button {padding:0px 12px;}
      }
    2. Or you could use advanced responsive CSS like below
      .button {padding:0.5% 24px;}
      #header-html {font-size:calc(2px + 1.5vw);top:30%;top:calc(30% – 3vw);}
      #branding #header-image img {min-height:120px;}
    #63039
    merlojh
    Participant

    Seems to be somewhat working but the text seems not quite right in mobile seems to far left letter missing on left? The button does not size at all? I need the top and bottom text different sizes.

    .toptext {  font-size: 80%; font-family: “Times New Roman”, Times, serif; }

    .bottomtext {  font-size: 90%;  font-family: “Times New Roman”, Times, serif; }

     

    .button {padding:0.5% 24px;}

    #header-html {font-size:calc(10px + 1.5vw);top:30%;top:calc(30% – 3vw);}

    #branding #header-image img {min-height:220px;}

    Thanks John

    #63041
    scrambler
    Moderator

    Two things, the text is shifted lefty because of your CSS rule below

    #header-html {text-align:center; position:absolute; color:white; top:30%; right:3%;}

    Remove the right:3%

    There is a typo in the rule below, the minus sign was changed to a dash (probably because of copy paste here.

    #header-html {font-size:calc(10px + 1.5vw);top:30%;top:calc(30% 3vw);}

    The proper rule is

    #header-html {font-size:calc(10px + 1.5vw);top:30%;top:calc(30% - 3vw);}
    #63044
    merlojh
    Participant

    Thanks so much I think it good now! If I have make any changes I can not figure out I will ask. Thanks John

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