[Support request] how can I have topbar with phone number and social media icons

Home Forums Support [Support request] how can I have topbar with phone number and social media icons

Home Forums Support how can I have topbar with phone number and social media icons

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #613251
    Mohit

    David gave me the code I remember… somehow I cannot find it in the support forum. It was something like

    add_action( 'generate_before_header', function(){
      echo '<div class="inside-topbar grid-container grid-parent"><div id="left">left content</div><div id="right">right content</div></div>';
    } );

    Example website with topbar i like:

    http://themes.muffingroup.com/be/lawyer/contact-us/

    Thanks,

    Saurabh

    GeneratePress 2.1.2
    #613319
    David
    Staff
    Customer Support

    Hi Saurabh, you can access any of your old Topics / Replies from the Forum Profile button at the top of this page. But oddly i can’t see where this code was posted. Odd.

    You can just use the Top Bar widget areas in the theme.
    Add you Social Icon Widget first, it will appear on the right, and then use a HTML widget adding each of the elements to a separate line.

    #613333
    Mohit

    How do you make that “div combination” such that left content appears on the left automatically and right content appears on right automatically.. Generatepress does this div thing where grid parent has 2 child divs. First child div automatically shows on left and right one shows on right side.. it didn’t need any css.

    <div>
       <div></div>
       <div></div>
    </div>

    Different question:

    How can I have content width same at this website below. what should be header width settings and footer and footer widget width settings?

    http://themes.muffingroup.com/be/lawyer/what-we-offer/

    #613349
    David
    Staff
    Customer Support

    Sorry a little confused. Which div combination? the one being used in the Top Bar Widgets?

    The main container width and padding is set in the Customiser > Container
    Set Inner Container Width to contained on the Header, Navigation and Footer.
    Match the Container Padding on the Header and Footer.

    #613364
    Mohit

    The html code (div combination) for adding left and right content to the topbar area probably using hook. Anyway I am okay doing with using topbar widgets. Right now I only want to add phone number and email address to the left side of topbar but when I try to add it, it gets added to the right side of topbar.

    Regarding content width, I am unable to get width settings right for the content, header, footer and footer widgets. I opened inspector tools to know different css settings of that website and tried adding them to the customizer(under layout) somehow I am unable to get them right. Alas it’s not working since I’m not a css expert. If could gimme correct customizer layout settings, that would be awesome!!

    #613372
    David
    Staff
    Customer Support

    Add an empty HTML widget first, this will force the second one to the left.
    Apart from the Navigation element, if you use the settings provided above then all elements should fall in line. To increase the padding on the navigation you can do this:

    .inside-navigation {
        padding-left: 40px;
        padding-right: 40px;
    }

    You need to consider the menu items have left and right padding, so aligning the menu titles may require different left / right padding to those you set in the container.

    #613476
    Mohit

    I edited this part on my reply later.. i think you missed it.

    Regarding content width, I am unable to get width settings right for the content, header, footer and footer widgets. I opened inspector tools to know different css settings of that website and tried adding them to the customizer(under layout) somehow I am unable to get them right. Alas it’s not working since I’m not a css expert. If could gimme correct customizer layout settings, that would be awesome!!

    #613486
    David
    Staff
    Customer Support

    Ok for aligning content.
    1. Customiser > Layout > Container > Set the width and the padding of the container. Make note of the padding.
    2. Customiser > Layout > Header > Set the Inner Container Width to Contained. And set the padding as above.
    3. Customiser > Layout > Footer – do the same as step 2.
    4. Customiser > Layout > Navigation – as step 2 but without padding, you can use he above mentioned CSS to adjust if needed.

    #738552
    Touhid

    I added the above code in my html widget but didnt work….would anyone help me to add phone no. and social media icon on my top bar

    #738765
    David
    Staff
    Customer Support

    Hi there,

    any chance you can start a new topic where you can share your Site URL privately (using the Site URL field). I don’t think the code mentioned here is what you need.

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