HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Replacing the default menu and creating a modern dropdown menu

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#104849 (In Topic #20457)

Non-joined user

How would i go on about doing this? I've looked to see how to replace it but I can't find it. 
Back to the top
 
Posted
Rating:
#104863
Avatar

Community saint

Back to the top
 
Posted
Rating:
#105004

Non-joined user

Hmm thank you I tried the link and it worked but unfourtunately it looks too old school and blocky if you know what i mean hahaha. I made one out of HTML and CSS and it can be found here but when I add it in it messes up the code. Where do i add it in.

Here is the link http://codepen.io/anon/pen/ysGFn
Back to the top
 
Posted
Rating:
#105015

Non-joined user

Alright I know the global_html_wrap is where the header is but can i insert the menu in or do i have to go to the specific camcode page for it
Back to the top
 
Posted
Rating:
#105032
Avatar

Community saint

The menu at the bottom of the header area is located in the panel_top comcode page. Normally it would be the panel_top comcode page that is located in the Welcome zone, but if you have other zones that need the new menu then you may have to check for and edit the panel_top comcode page in other zones as well.
Back to the top
 
Posted
Rating:
#105172

Non-joined user

Sorry, I have been away from the computer for a while. Anyway I put the CSS in the Global.CSS like this

.menu_type_dropdown
@import url(http://fonts.googleapis.com/css?family=Montserrat);
 
* {
    margin: 0;
    padding: 0;
}
.nav {
    background: #232323;
    height: 60px;
    display: inline-block;
}
 
.nav li {
    float: left;
    list-style-type: none;
    position: relative;
}
.nav li a {
    font-size: 16px;
    color: white;
    display: block;
    line-height: 60px;
    padding: 0 26px;
    text-decoration: none;
    border-left: 1px solid #2e2e2e;
    font-family: Montserrat, sans-serif;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
    background-color: #2e2e2e;
}
 
#settings a {
    padding: 18px;
    height: 24px;
    font-size: 10px;
    line-height: 24px;
}
#search {
    width: 357px;
    margin: 4px;
}
#search_text{
    width: 297px;
    padding: 15px 0 15px 20px;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    border: 0 none;
    height: 52px;
    margin-right: 0;
    color: white;
    outline: none;
    background: #426aa9;
    float: left;
    box-sizing: border-box;
    transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: white;
}
#search_text:focus {
    background: rgb(64, 151, 119);
}
#search_button {
    border: 0 none;
    background: #426aa9 url(search.png) center no-repeat;
    width: 60px;
    float: left;
    padding: 0;
    text-align: center;
    height: 52px;
    cursor: pointer;
}
#options a{
    border-left: 0 none;
}
#options>a {
    background-image: url(triangle.png);
    background-position: 85% center;
    background-repeat: no-repeat;
    padding-right: 42px;
}
.subnav {
    visibility: hidden;
    position: absolute;
    top: 110%;
    right: 0;
    width: 200px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background: #232323;
}
.subnav li {
    float: none;
}
.subnav li a {
    border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

Was that the right way to put it?
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: