Jump to content

Archived

This topic is now archived and is closed to further replies.

jamesmaccer

Align Nav Bar with Logo

Recommended Posts

jamesmaccer

Hi, 

 

I'm trying to align my nav bar with the logo on the top left hand side of my website. DMS won't let me do this. Is there anything I can do? Here is the site: 

 

www.thewoosgethitched.co.uk

Share this post


Link to post
Share on other sites
jamesmaccer

Please ignore this - I have now resolved it using custom CSS. 

Share this post


Link to post
Share on other sites
greenfly

Can you provide the CSS in case anyone else is looking for something similar? 

 

Good to know you fixed it  :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jamesmaccer

Hi Martin,

 

Sorry, I missed this. With pleasure! Basically, I've put a media box on the left & made it so that the image is a hyperlink to the home page. I've then put a nav bar on the right & got rid of borders etc so that it blends in with the website. Here is the CSS, but obviously this is for my site -  it would need tweaking depending on size of images etc:

 

.logo img {
max-height: 50px;
}
.navbar-inner {
padding-top: 30px;
}
.section-navbar {
font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;
font-weight: 800;
}
.navbar {
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(255, 255, 255, 0.25);
color: rgba(255,255,255,0.7);
}
.section-highlight .highlight-head {
font-size: 31.8px;
margin: 0;
}
.pl-imageframe img, img.pl-imageframe {
padding: 4px;
background: #ffffff;
border: 1px solid #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0);
box-shadow: 0 1px 2px rgba(0,0,0,0);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

Share this post


Link to post
Share on other sites
jamesmaccer

Oh - I should point out that this is much more easy to do with the fixed navigation bar enabled. However, I didn't really want a fixed navbar for my site! There is a really good youtube vid for anyone who wants to alter fixed nav bars in pagelines: 

 

http://www.youtube.com/watch?v=vlkFrrZ_C2M

Share this post


Link to post
Share on other sites
Danny

Thanks for sharing!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×