Archived topic
how can I have topbar with phone number and social media icons
9 replies · Started by Mohit on July 2, 2018
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
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.
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?
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.
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!!
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.
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!!
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.
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
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.
