Jump to content

Archived

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

Mspeppy

Full width Navbar

Recommended Posts

Mspeppy

Hello,

 

I am trying desperately to have my navbar full width with a top and bottom border.  I have been unsuccessful in trying to add css to get my desired look.  I'm hoping to get it to look similar to the navbar on this website http://www.cheekychickblog.com/cheeky-chick-says.  Any assistance would be greatly appreciated.

 

 

Share this post


Link to post
Share on other sites
greenfly

Hello @Mspeppy 

 

In order to help with this - could we see examples of the code you have tried so we can suggest changes / or alternate methods. 

 

Also could we have a link to your site please? 


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
Mspeppy

My site is http://mspeppy.com

 

 

Here is what I've used for CSS regarding the navbar:

 

.navbar .navline li a {
color: #000000;
}
 
.navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    background-color: transparent;
    font-family: verdana, tahoma, helvetica, arial, sans-serif;
    font-size: 18px;
}
 
.section-navbar .navbar .navline > li > a {
  color:#000000;
}
 
.section-navbar .pl-section-pad .navbar-content-pad {
padding-right: 0px;
padding-left: 0px;
}
 
 
/*--COLOR NAVBAR--*/
.navbar.pl-color-base .navline > li:hover > a, .navbar.pl-color-base .navline > li.current-menu-item > a, .navbar.pl-color-base .navline > li.dropdown.open > a {
color: rgb(0, 0, 0);
background-color: #ffffff;
box-shadow: none;
}
 
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
text-decoration: none;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
color: rgb(255, 255, 255);
background-color: rgb(33, 172, 80);
background-image: linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -o-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -moz-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -ms-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-repeat: repeat-x;
}
 
 
I realize this probably looks like a complete disaster but as someone who is learning css as I go there are some things i'm just not able to find at this point.
 
Thank you for any help you can provide.
 
Heather

Share this post


Link to post
Share on other sites
GetMeWebDesign

You are asking two different questions. The site you were looking at has an image and then a separate section for the nav.

 

To have the top and bottom border. Add a separate canvas. Target

 

#pl_area******** {
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
}
 
In side the canvas, add your content width navi or navbar
 
Above all of this, add you canvas (with background) and mediabox.... set your padding accordingly
 
For the rest of the code. I am not sure exactly what you are wanting to do? Are you wanting to replicate her nav exactly with its #F3F3F3 background for active and hover? Same style of dropdown? 

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Mspeppy

Is a canvas the same as a section?  I don't see a canvas option.

 

Thanks

Share this post


Link to post
Share on other sites
greenfly

You are using the free version of  DMS so there is no Canvas section. 


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
GetMeWebDesign

I wonder if my DMS is different. I am sure it is, but everytime I mention Canvas, people say is that a section. It will appear in Add to Page > Full Width and its description is:

 

Description
Creates a full width area with a nested content width region for placing sections and columns.

 

To me, sections are the many components that can be added to the page


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
GetMeWebDesign

Oh... see Martin has answered the question... Not sure I will be of much help then... I dont have the Free version so no idea what the possibilities are


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
greenfly

sorry i pressed post without finishing my topic.. And it is too late for more coffee.... :/

 

Let em take a look at this and i will update you shortly. 

 

thanks GetMeWebDesign :) 


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

×