Community Forums › Forums › Archived Forums › Design Tips and Tricks › Shifting Primary Navigation Bar to right
- This topic has 9 replies, 2 voices, and was last updated 13 years, 4 months ago by
Mike Gosling.
-
AuthorPosts
-
February 4, 2013 at 8:35 am #17840
Mike Gosling
ParticipantWhere in the CSS for Focus Theme do I set the Primary navigation bar to right justify?
Dr. Mike Gosling, The Emotional Leader Program
February 4, 2013 at 9:10 am #17846SoZo
MemberPlease include a link to your site with all questions so that people can see what is going on.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
February 4, 2013 at 9:48 am #17871Mike Gosling
ParticipantOk, thanks and sorry. Site is: http://karengosling.com
Dr. Mike Gosling, The Emotional Leader Program
February 4, 2013 at 9:56 am #17875SoZo
MemberYou'd need to break out the .menu-primary ul selector out of this group
.menu-primary ul, .menu-secondary ul, #header .menu ul { float: left; width: 100%; }Into its own rule
.menu-primary ul { width: auto; float: right; }
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
February 6, 2013 at 8:00 am #18426Mike Gosling
ParticipantI have now set the CSS as follows:
.menu-secondary ul,
#header .menu ul {
float: left;
width: 100%;
}
.menu-primary ul {
width: auto;
float: right;
}
There is no change - The primary menu still aligns left and not right.
Please advise further.
Dr. Mike Gosling, The Emotional Leader Program
February 6, 2013 at 8:06 am #18427SoZo
MemberChange it to this
ul.menu-primary {
width: auto;
float: right;
}
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
February 6, 2013 at 4:59 pm #18537Mike Gosling
ParticipantHi, I have changed the CSS to include ul.menu-primary {
This has now removed the top navigation space and placed the primary navigation bar into the Header space, which has distorted the columns in my header and will likely mean the nav bar will disappear when I add an image in the header space.
Please advise.
Dr. Mike Gosling, The Emotional Leader Program
February 6, 2013 at 5:07 pm #18539SoZo
MemberIf you want the grey background to span the header you'd need to add it using #nav
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
February 6, 2013 at 5:52 pm #18547Mike Gosling
ParticipantThank you. That is helpful to know about the #nav.
Are you able to advise me how to correct the header area after inserting: ul.menu-primary {
Please view the header at http://www.KarenGosling.com
Dr. Mike Gosling, The Emotional Leader Program
February 7, 2013 at 11:28 pm #18867Mike Gosling
ParticipantI'm advised that I need to create a css rule for #nav and add css for it in order to do what I need. That will correct the color above the header. (also add clear:both; to the css for #header). Unfortunately this is all jargon to me.
If anyone reading this post is willing to complete this task for me for a fee paid by Paypal, please contact me with details at [email protected].
Thanks.
Dr. Mike Gosling, The Emotional Leader Program
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.