Announcement

Collapse
No announcement yet.

How to center Tagline in Header Widget Area for desktop and mobile

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to center Tagline in Header Widget Area for desktop and mobile

    I have a Tagline "Creating effective visual marketing solutions for growing businesses" that I entered in Appearance > Customize > Site Identity. It shows up in the header to the right of my logo. I've had it set to Text Align: Right under Header > Header Widget Area Styles. (I can select only Left or Right, not centered.) It looks awkward on my iPhone in a vertical and would look nicer if it was centered. If it was centered in the space to the right of the logo on the desktop, as well as centered under the logo on mobile, that would be ideal.

    Is there a way to add some CSS code to force it to center? And where would I place it if someone could provide that code? Or is there another solution?

    Thanks a bunch!

  • #2
    May I guess we are talking about the Freshly skin maybe? And could you provide a URL of your site, please?

    Comment


    • #3
      My site is outreachmedia.com. It's using the Enterprise Press skin. Hope that helps.

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        And could you activate that tagline maybe, so we can see the problem? Depends on how long your tagline is and if there is enough space between logo and Header Right widget until the breakpoint is reached....

    • #4
      I'm not sure what you are asking me to do to "activate" the tagline. Can you clarify?

      The tagline appears to the right of the Outreach Media logo. It's named a "tagline" when I go into Appearance > Customize > Site Identity. And it shows up in the Header Widget Area.

      Comment


      • #5
        Oh I see. A tagline is what you would usually put in Wordpress Settings - General in addition to the title for the site. You can see that in EnterprisePress when text instead of a logo is used. That can be styled in Dynamik Design also (Tagline fonts and the like) and it was what I was missing when looking at your site. Won´t show up when you use a logo of course - sorry, my bad.

        But what I see on the right side of the Header is some text in Header Right area in a text widget - a title of a widget actually. So this is your tagline?

        Creating effective visual marketing solutions for growing businesses.

        You can try some custom CSS to achieve the centering of this title:
        Code:
        .header-widget-area h4.widget-title {text-align: center;}
        Put this in a mediaquery box of your choice in Dynamik Design - Responsive. I think the third one would be right.

        Comment


        • #6
          Thanks SiGa!

          That code totally worked. I ended up putting it in the 1st Media query box since I wanted it to work for horizontal and vertical versions for tablets and phones. I assume that's how those different media query sections are set up. Basically any code placed in media query 1 works on all sizes and orientations. If you want to tweak it for other combinations you put the code in the other areas. Correct?

          On a more urgent topic... I need to back up a bit because I just realized that my navigation bar on the desktop version completely disappears as soon as I check any of the drop down options in Responsive > Default Media Query Options > Navbar Media Query Styles. I have to set it to Default to get the nav bar to appear on desktop and for it to at least stack the nav bar links on mobile. I like the Mobile Dropdown version for mobile, but I need the nav bar to stay visible on the desktop if at all possible. Is it just a setting I'm not checking or understanding how this works?

          Comment


          • #7
            1.) Or you just put them in the desired media query box right away, if you don´t intend to overwrite it in any other..

            2.) That´s hard to tell because here in forum, we can only look at frontend while regarding backend, guessing is all we can do - might be a setting problem somewhere in Appearance - Menus - Manage Locations or in Dynamik Responsive. But can´t imagine right now what in Dynamik settings would make a desktop menu disappear, sorry.

            Best you could do is setting up a ticket for support staff and let them have a look at your backend.

            Comment


            • #8
              Thanks again for the guidance SiGa. You are a rockstar as usual!

              Comment


              • SiGa
                SiGa commented
                Editing a comment
                Thank you.

            • #9
              The tagline mentioned here has disappeared. Possibly due to an update to the WP core, Dynamik or a plugin? Does anyone have a suggestion for what might have happened and how to fix it?

              The site is OutreachMedia.com

              Thanks much!

              Comment


              • SiGa
                SiGa commented
                Editing a comment
                Did you check if the widget you used is still in the Header Right widget area?

            • #10
              Ah. Got it!

              I was falsely assuming that the tagline was being fed from the Appearance > Customize menu.

              I simply added a text widget in the area you suggested and it showed up. Thanks so much for bailing me out again.

              Can I buy you a drink?!

              Comment


              • SiGa
                SiGa commented
                Editing a comment
                LOL sure. Glad to hear it´s sorted!
            Working...
            X