Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minor CSS problem with Navigation bar
- This topic has 14 replies, 2 voices, and was last updated 8 years, 4 months ago by Vasilis.
-
AuthorPosts
-
December 15, 2015 at 7:02 am #173826VasilisMember
Hello Awesome people
I just recently tried to add Simple Social Icons on my Genesis Child Theme navigation bar
The problem is that the widget will NOT go right and will NOT stay at the same line with the navigation menu
CSS I use for this is:
/* Navigation Bar Simple Social Icons
------------------------------------------------------------ */.aside.widget-area {
display: inline-block;
float: right;
}.nav-primary li:last-of-type {
float: right;
height: 32px;
}.nav-primary aside {
width: auto;
display: inline-block;
height: 32px;
width: 250px;
}.simple-social-icons ul li {
margin-right: 0 !important;
}Any ideas where is not correct?
Kind Regards
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 17, 2015 at 8:23 pm #174149VasilisMemberBumping this up
I know this is very tiny...however I can't find it.
Any ideas/
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 18, 2015 at 12:54 am #174177Jason WeberMemberI'm not sure why you're putting all that CSS in there.
For your menu on the Genesis Sample child theme -- if you want it to look like the demo -- you need to drag a Custom Menu widget into the header right widget area, and then select the menu.
If you would prefer not to have the menu there, simply drag a Simple Social Icons widget there.
It appears you're trying to use your menu as your primary navigation (Appearances >> Menus >> Menu Locations tab. This is perfectly fine.
But if you do that, then drag the Simple Social Icons widget into the header right widget area, and skip all that custom CSS.
Lastly, if you insist on that Custom CSS, increase the width from 250px to 350px.
December 24, 2015 at 2:00 am #174700VasilisMemberHey Jason , thank you very much for your message
Are you implying that to put my social icons inside the primary navigation bar I DONT need to create a new widget and custom CSS?
Trying the standard header right widget places the social media icons on top of my header image...and not on and inside the navigation bar on the right...
Tried the width increase to 350px as you mentioned and now I see my social icons in the middle of the navigation bar but correctly on the same line.
Should I try with more like 700px?
Thank you once again for your response.
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 24, 2015 at 8:21 am #174745Jason WeberMemberOh, now I understand what you're trying to do, Vasilis. Here are the steps to take that will accomplish your objective:
(1)
Add the following to your child theme's functions.php (or custom functions or code snippets if you have that):genesis_register_sidebar( array( 'id' => 'nav-social-menu', 'name' => __( 'Nav Social Menu', 'your-theme-slug' ), 'description' => __( 'This is the nav social menu section.', 'your-theme-slug' ), ) ); add_filter( 'genesis_nav_items', 'sws_social_icons', 10, 2 ); add_filter( 'wp_nav_menu_items', 'sws_social_icons', 10, 2 ); function sws_social_icons($menu, $args) { $args = (array)$args; if ( 'primary' !== $args['theme_location'] ) return $menu; ob_start(); genesis_widget_area('nav-social-menu'); $social = ob_get_clean(); return $menu . $social; }
(2)
Remember to drag a Simple Social Icons plugin’s widget into the Nav Social Menu widget area and configure it.(3)
Add this to your child theme's style.css (or, if you have a custom CSS, add it there):.genesis-nav-menu .widget-area { float: right; padding-top: 2.2rem; }
If things don't look like they should, you can try reducing the rem from 2.2 to 1.5 or so.
Let us know how it goes!
If you're having trouble implementing the above, then you can follow these steps:
(1)
Add the following to your child theme's functions.php (or custom functions or code snippets if you have that):add_filter( 'genesis_nav_items', 'sws_social_icons', 10, 2 ); add_filter( 'wp_nav_menu_items', 'sws_social_icons', 10, 2 ); function sws_social_icons($menu, $args) { $args = (array)$args; if ( 'primary' !== $args['theme_location'] ) return $menu; ob_start(); dynamic_sidebar('Social Menu'); $social = ob_get_clean(); return $menu . $social; }
(2)
Ensure that sidebar’s name is correct in the dynamic_sidebar function call. If you would like to do this in Secondary Navigation Menu, change primary to secondary.(3)
Go to Appearance -> Widgets and drag Simple Social Icons widget into ‘Social Menu’ sidebar. Configure the settings and enter in the URLs of your desired social sites.(4)
Add this to your child theme's style.css (or, if you have a custom CSS, add it there):#nav .widget { float: right; margin-right: 2px; } .socialmedia-buttons { margin-top: 6px; margin-right: 3px; } .menu-primary .socialmedia-buttons a { float: left; border-right: none; padding: 0; } .menu-primary .socialmedia-buttons img { margin-bottom: 0; }
December 24, 2015 at 10:05 pm #174783VasilisMemberHey Jason , thank you very much for your support
Really appreciate it.
I tried the second version , still I can't see anything changing although I have disabled my caching plugins and cleaned my browser cookies.
Any more ideas?
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 24, 2015 at 10:15 pm #174784Jason WeberMemberYou're using the Genesis Sample child theme. I'm unsure why the first version didn't work. What happened when you tried to implement the 1st version?
You do realize that you were supposed to replace "your-theme-slug" with "genesis-sample", or whatever the theme's slug is, right?
Meanwhile, I'll read up on it and double check to make sure I gave you the right advice, which I am sure I did.
December 24, 2015 at 10:33 pm #174788Jason WeberMemberI tested the first solution on Altitude Pro and Centric Pro, and both worked fine.
December 25, 2015 at 12:24 am #174790VasilisMemberHey , here is what I have now ,
//* Register the widget on nav bar genesis_register_sidebar( array( 'id' => 'nav-social-menu', 'name' => __( 'Nav Social Menu', 'genesis_sample' ), 'description' => __( 'This is the nav social menu section.', 'genesis_sample' ), ) ); //* Add simple social icons on nav bar add_filter( 'genesis_nav_items', 'sws_social_icons', 10, 2 ); add_filter( 'wp_nav_menu_items', 'sws_social_icons', 10, 2 ); function sws_social_icons($menu, $args) { $args = (array)$args; if ( 'primary' !== $args['theme_location'] ) return $menu; ob_start(); genesis_widget_area('nav-social-menu'); $social = ob_get_clean(); return $menu . $social; }
and inside the CSS
/* Navigation Bar Simple Social Icons ------------------------------------------------------------ */ .genesis-nav-menu .widget-area { float: right; padding-top: 2.2rem; }
Still I get this messed up version...I'm not sure if it correct or not though cause I'm using CloudFlare for my website.
If you see the code is correct then it will probably be correct and wait for the refresh.
Your thoughts?
Highly appreciated
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 25, 2015 at 12:48 am #174791Jason WeberMemberCloudFlare wouldn't have anything to do with it.
Did you try reducing the rem to 1.5?
How did you get the Contact menu item to float:right?
Perhaps moving your Contact menu item to go along w/ the rest of the menu items will sort things out.
December 25, 2015 at 1:04 am #174792VasilisMemberWell yes I tried , still no result.
I didn't , lol...
Before changing the CSS to what you suggest it was left together with the rest of the menu links.
"Contact" is a menu link from the nav bar. I cannot control it specifically as far as I know.
Kindly appreciate your help.
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 26, 2015 at 10:16 am #174832Jason WeberMemberWell, it appears you have it resolved, per what you want. If so, simply mark this thread as resolved so we know.
Best of luck!
December 26, 2015 at 8:35 pm #174848VasilisMemberAwesome!
Thank you very much Jason.
Appreciate it!
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 26, 2015 at 8:38 pm #174849VasilisMemberThis reply has been marked as private.December 27, 2015 at 12:15 pm #174744Jason WeberMemberOh, now I understand what you're trying to do, Vasilis. Here are the steps to take that will accomplish your objective:
(1)
Add the following to your child theme's functions.php (or custom functions or code snippets if you have that):genesis_register_sidebar( array( 'id' => 'nav-social-menu', 'name' => __( 'Nav Social Menu', 'your-theme-slug' ), 'description' => __( 'This is the nav social menu section.', 'your-theme-slug' ), ) ); add_filter( 'genesis_nav_items', 'sws_social_icons', 10, 2 ); add_filter( 'wp_nav_menu_items', 'sws_social_icons', 10, 2 ); function sws_social_icons($menu, $args) { $args = (array)$args; if ( 'primary' !== $args['theme_location'] ) return $menu; ob_start(); genesis_widget_area('nav-social-menu'); $social = ob_get_clean(); return $menu . $social; }
(2)
Remember to drag a Simple Social Icons plugin’s widget into the Nav Social Menu widget area and configure it.(3)
Add this to your child theme's style.css (or, if you have a custom CSS, add it there):.genesis-nav-menu .widget-area { float: right; padding-top: 2.2rem; }
If things don't look like they should, you can try reducing the rem from 2.2 to 1.5 or so.
Let us know how it goes!
If you're having trouble implementing the above, then you can follow these steps:
(1)
Add the following to your child theme's functions.php (or custom functions or code snippets if you have that):add_filter( 'genesis_nav_items', 'sws_social_icons', 10, 2 ); add_filter( 'wp_nav_menu_items', 'sws_social_icons', 10, 2 ); function sws_social_icons($menu, $args) { $args = (array)$args; if ( 'primary' !== $args['theme_location'] ) return $menu; ob_start(); dynamic_sidebar('Social Menu'); $social = ob_get_clean(); return $menu . $social; }
(2)
Ensure that sidebar’s name is correct in the dynamic_sidebar function call. If you would like to do this in Secondary Navigation Menu, change primary to secondary.(3)
Go to Appearance -> Widgets and drag Simple Social Icons widget into ‘Social Menu’ sidebar. Configure the settings and enter in the URLs of your desired social sites.(4)
Add this to your child theme's style.css (or, if you have a custom CSS, add it there):#nav .widget { float: right; margin-right: 2px; } .socialmedia-buttons { margin-top: 6px; margin-right: 3px; } .menu-primary .socialmedia-buttons a { float: left; border-right: none; padding: 0; } .menu-primary .socialmedia-buttons img { margin-bottom: 0; }
-
AuthorPosts
- The topic ‘Minor CSS problem with Navigation bar’ is closed to new replies.