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

[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!!

[Tom]

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 🙂

[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?

[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/

[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?

[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/

[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.

[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..

[bdbrown]

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

[Shane]

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

blog.southernstatesimaging.com

[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.

[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.

[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?

[bdbrown]

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

@media (min-width: 768px) {

You have this:

@media (max-width: 768px) {

[Shane]

🙂 Thanks man, looks great now!

[Author]

Posts