Jump to content

Secondary nav width

Featured Replies

Posted

I want to make the secondary nav bar (the menu bar that is under the main menu) the same width as the body of the page. How?

Thank you

  • Author

Isn't this code supposed to make it transparent? It is not working.

/* Secondary navigation level */
   .ipsNavBar_secondary {
	position: absolute;
    bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	z-index: 1000;
	display: none;
	background: transparent !important; 
    }

 

  • Author

Ok figured out most of my issue. I am using cjmenu and it uses the secondary nav color. I could overwrite it with

/* main color for widgets/plugins/template plugin */
.cjmenu_widget {
    background-color: #1A2758 !important;
  	height: 75px!important;
  	border: 2px solid #152047;
  	box-shadow: 10px 10px 113px 14px rgba(0, 0, 0, 0.75);
    border: 2px solid #152047;
    border-radius: 15px 15px 15px 15px; 
}

But there was still the original secondary nav bar color showing on each sides of cjmenu and since I am using a background image and a transparent header, that bar did not look good. Fixed it when I realized that there was another line in cjmenu css that refers to nav color and made it transparent.

#primaryMenu {
background: transparent;
}

Now my only issue is that I have a very very thin line after the header and menu. Ouf! getting there.

Hope it helps someone else.

1 hour ago, Steph40 said:

Isn't this code supposed to make it transparent? It is not working.


/* Secondary navigation level */
   .ipsNavBar_secondary {
	position: absolute;
    bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	z-index: 1000;
	display: none;
	background: transparent !important; 
    }

 

You will need to do something like this and mess about with the radius what you like

#ipsLayout_header nav {
  background: TRANSPARENT;
}

#ipsLayout_header {
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

 

  • Author

Thank you @TheJackal84, you posted 2 seconds after I solved most of my issues but I still appreciate you help and input.

  • Author

And I got rid of that tiny line after the header with

#ipsLayout_header {
	border-bottom: 0px;
}

 

3 hours ago, Steph40 said:

And I got rid of that tiny line after the header with


#ipsLayout_header {
	border-bottom: 0px;
}

 

if you mess with a radius you might prefer it

Archived

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

Recently Browsing 0

  • No registered users viewing this page.