Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Built in header widget best option to add business tagline, links and number?

Home Forums Support Built in header widget best option to add business tagline, links and number?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #142667
    Shane

    I’ve been trying to find the best way to replicate a simple look found at the old site:

    http://www.southernstatesimaging.com/

    The few rows of blue pixels lining the top of the page and the ‘About Us/Visit Our Blog/866-750-7744’ links which react to mobile device by stacking neatly on top of the site logo, and the tagline are what I am trying to find the best way to add.. The tagline seems to disappear behind the logo in the current site and I am fine with this.. Can this be achieved with a single HTML header widget through the Generate press theme, or should I be going about this an easier way?

    blog.southernstatesimaging.com

    Thanks again! Almost done!!

    #142719
    Tom
    Lead Developer
    Lead Developer

    You should be able to accomplish this using a regular “Text” widget in the “Header” widget area in “Appearance > Widgets”.

    Simply add your HTML like this for example:

    <a href="https://generatepress.com">Link to GP</a> <span>/</span> <a href="https://google.com">Link to Google</a> <span>/</span> 1-234-567-8901

    Let me know if you need more info 🙂

    #142849
    Shane

    Looks like this puts me on the right track. I would like to be able to move this text widget around a bit and add a row of dark blue pixels to the top of the whole width of the page with one of these text header widgets if possible..

    Is there a way to put a line break in the title of the text widget? Also as of now this text widget overlays the site logo in mobile view, can I have it stack above of the site logo when the site scales to mobile view instead?

    #142872
    bdbrown

    move the text widget around
    This can be done using css

    add a row of dark blue pixels
    Try this css:

    header {
        border-top: 5px solid #063c7a;
    }
    

    put a line break in the title
    You should be able to add a break tag <br> in the title

    can I have it stack above of the site logo
    Give this css a try:

    @media (max-width: 768px) {
        .inside-header {
            display: table;
        }
        .header-widget {
            display: table-header-group;
        }
        .site-branding {
            display: table-footer-group;
        }
    }
    

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    #142874
    Shane

    Hmm, when I add

    header {
    border-top: 5px solid #063c7a;
    }

    it adds the bar to top of content window, not top of page above everything.. Also I have a couple of items already in my @media tag, can all of these not play nice? As of now the text widget still just overlaps the site logo, this code also caused the site logo to align top center instead of staying top left.

    /* Disabled Dropdown Arrows */

    @media
    ( min-width: 200px ) {
    .inside-header {
    display: table;
    }
    .header-widget {
    display: table-header-group;
    }
    .site-branding {
    display: table-footer-group;
    }

    .sf-menu li a::after {
    display: none;
    }

    .sf-menu > li a {
    padding-right: 11px !important;
    }

    }

    On a somewhat related note, i had messed with the @ media to make the dropdown arrows disappear in mobile view, yet i can still see the outline of the arrows overlapping the text of the navigation buttons when hovering. Easy way to correct this?

    #142876
    Shane

    also, this seems relevant:

    .header-widget {
    border-top: 5px solid #063c7a;
    Float: right;
    overflow: hidden;
    max-width: 75%;
    position: absolute;
    bottom: 0;
    right: 15px;
    }

    What have I got wrong? Do I need separate widgets to float the blue rows of pixels up top above everything and have the “visit our blog” / phone number info up in the top right, and the tagline centered on the right site. Going for the look of header space here:

    http://www.southernstatesimaging.com/

    #142877
    bdbrown

    I don’t see the css applied to the header element. Is it in there? You could also use the .site-header class instead of the element name to target the header.

    The media query I posted has a different breakpoint and is set for mobile viewports. It should be a separate entry.

    #142878
    Shane

    Closer!

    The blue bar is at top of header section now how I’d like, but it’s also still at top of content window.. Can I get rid of the content window one?

    Mobile view still doesn’t stack text widget on top of site logo..

    #142880
    bdbrown

    Can you update the blog site? I don’t see any of that being applied.

    #142881
    Shane

    sorry.. got the new site/blog on subdomain here:

    blog.southernstatesimaging.com

    #142882
    bdbrown

    Better, thanks.

    To fix the blue line change this:

    header {
        border-top: 5px solid #063c7a;
    }
    

    to this:

    .site-header {
        border-top: 5px solid #063c7a;
    }
    

    Working on the other issues.

    #142883
    bdbrown

    Take your custom header-widget css and wrap it in a media query so it’s only applied on the desktop:

    @media (min-width: 768px) {
        .header-widget {
            Float: right;
            overflow: hidden;
            max-width: 75%;
            position: absolute;
            bottom: 0;
            right: 15px;
        }
    }
    

    And then change the other media query from 768px to 767px so they don’t conflict.

    #142901
    Shane

    Definitely looking better! Thanks.. Still getting overlap of the Header Text widget on top of the site logo.. Is it the arrow eliminating @media item i have that’s conflicting? Is there a better way of going about completely removing the arrows so they don’t cast that shadow over the navigation text during hover?

    Here’s what I have fore @media items:


    @media
    (max-width: 768px) {
    .header-widget {
    Float: right;
    overflow: hidden;
    max-width: 75%;
    position: absolute;
    bottom: 0;
    right: 15px;
    }
    }

    @media
    (max-width: 767px) {
    .inside-header {
    display: table;
    }
    .header-widget {
    display: table-header-group;
    }
    .site-branding {
    display: table-footer-group;
    }
    }

    /* Disabled Dropdown Arrows */

    @media
    ( min-width: 200px ) {
    .sf-menu li a::after {
    display: none;
    }

    .sf-menu > li a {
    padding-right: 11px !important;
    }

    }

    Should I combine / remove anything keeping the widget from stacking in mobile view?

    #142903
    bdbrown

    Check the media query in my previous post; it’s this:

    @media (min-width: 768px) {
    

    You have this:

    @media (max-width: 768px) {
    
    #142906
    Shane

    🙂 Thanks man, looks great now!

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