Community Forums › Forums › Archived Forums › Design Tips and Tricks › Agency Pro – Header right widgets
Tagged: agency pro, Header right widgets
- This topic has 7 replies, 2 voices, and was last updated 10 years ago by Steve@316 Design.
-
AuthorPosts
-
April 25, 2014 at 6:40 pm #102404Steve@316 DesignMember
I currently have two widgets in the "Header Right" widget area" custom menu & social icons. I'd like the social icons to be at the end of the nav. How do I do that?
Thank You, Steve
Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™April 26, 2014 at 7:34 am #102421Lauren @ OnceCoupledMemberYou just want to add some CSS to style them:
.site-header .widget { float: left; width: 90%; } .site-header .widget:last-child { width: 10%; }
You may need to add some additional styles to make it look better or to compensate for smaller screen sizes.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 26, 2014 at 9:04 am #102432Steve@316 DesignMemberdid you mean the ".site-header .widget-area {"
Also, there is no ".site-header .widget:last-child {Below is what I currently have
/* Widget Area
--------------------------------------------- */.site-header .widget-area {
float: right;
text-align: right;
width: 800px;
}.site-header .widget-area li {
margin: 0;
padding: 0;
}.site-header .search-form {
float: right;
margin-top: 24px;
margin-top: 2.4rem;
}/*
Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™April 26, 2014 at 9:20 am #102435Steve@316 DesignMemberUpdate: here's what I have.
/* Widget Area
--------------------------------------------- */.site-header .widget-area {
float: right;
text-align: right;
width: max-width;
}.site-header .widget-area li {
margin: 0;
padding: 0;
}.site-header .search-form {
float: right;
margin-top: 24px;
margin-top: 2.4rem;
}/*
Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™April 26, 2014 at 10:00 am #102438Lauren @ OnceCoupledMemberYou need to add the CSS I gave you, or some modification of it, to your style sheet.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 26, 2014 at 2:22 pm #102502Steve@316 DesignMemberOk, I added the css you gave me. But the last nav item was wrapped below. So I made .genesis-nav-menu { 105% and it seemed to have worked. Is that the right way to do it?
Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™April 28, 2014 at 8:36 am #102717Lauren @ OnceCoupledMemberSure. It overflows a little, meaning there isn't extra spacing between the menu and logo at some specific screen sizes. If it works for you though...
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 28, 2014 at 8:38 am #102719Steve@316 DesignMemberAwesome thx. Any chance you have any suggestions on this one? http://www.studiopress.community/topic/agency-pro-home-widgets/
Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™ -
AuthorPosts
- The topic ‘Agency Pro – Header right widgets’ is closed to new replies.