Jump to content
Sign in to follow this  
klopez

How to Move the Nav Menu to the right of my logo

Recommended Posts

klopez

I have been trying to move my nav bar to the top right of my header but my lack of knowledge of CSS is not helping. I am new to CSS and website design so some patience would be greatly appreciated ;-) I have tried moving the actual nav buttons but can't move the primary-nav succesfully. Hope to hear back soon, thanks. My site is mymicroclass.com

Share this post


Link to post
Share on other sites
bevj

first what I will get you to do is in pagelines > template > header, move the navigation to above branding

Share this post


Link to post
Share on other sites
klopez

hi bevj, thanks for your starting point, but what now? I just have my nav above my logo. I want to shift my nav to the right, while also decreasing its width. I'm pretty sure I can handle moving the logo to the top left. If I want to shift the nav a few pixels below the top, how can I do that? Hope someone can help out. Thanks, Kevin

Share this post


Link to post
Share on other sites
lulajack

If someone can please help. I have now been able to shift my navigation to the right using: .main_nav { margin: 0 auto ; width:150px } But now I need to align my logo to the navigation, currently the navigation sits underneath the logo. Whether I place the navigation on top of the site branding, or below, there is always a margin from the one element to the other. See: http://www.gayleensdecadence.co.za/ One other issue I am also experiencing is I do not want a background colour or bckground hover colour to my navigation. I simply want only the text to highlight on mouseover. If anyone can help will be much appreciated!

Share this post


Link to post
Share on other sites
lulajack

Right... I think I have fixed my own problem. Still struggling with a few other issues, but got the positioning right using this code: .main_nav { margin: 0 auto; width:150px; background: none; border-bottom: 0; padding-bottom: 80px; } .main_nav li{ position:relative; background: #3b1902 ; text-decoration: none; } ul#menu-nav li.page_item a:hover {background-color: #3b1902; color: #FFF;} #branding .content-pad{ padding: 25px 0px 125px 0px; } #branding .branding_wrap{ position: absolute; zoom:0; padding-top: 20px; }

Share this post


Link to post
Share on other sites
bevj

sorry haven;t had a chance to follow up on this, you can also try switching the navigation to brand nav in the pagelines > template setup. It puts a custom image beside the navigation.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×