WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to split a top menu in two? (16 posts)

  1. dorinspoaller
    Member
    Posted 1 year ago #

    The theme Im using doesn't have a custom menu option.

    I want to to something like this:

    PAGE 1 -- PAGE 2 -- LOGO -- PAGE 3 -- PAGE 4

    Is it possible?

    http://risto.torox.ro

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You probably will just have to add a margin right on PAGE 2 and margin left on PAGE 3.

  3. dorinspoaller
    Member
    Posted 1 year ago #

    Wow, that was faster than what I expected :)

    Ok, but they are not separate. How do I do what you said?

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    - Remove the styles of the <ul> of the navigation and add them to each <li>.
    Then try adding something like;

    ul#mainmenu-menu li.menu-item:nth-child(2),
    ul#mainmenu-menu li.menu-item:nth-child(3) {
     display: block;
    }
    
    ul#mainmenu-menu li.menu-item:nth-child(2) {
     margin-right: 50px;
    }
    
    ul#mainmenu-menu li.menu-item:nth-child(3) {
     margin-left: 50px;
    }
  5. dorinspoaller
    Member
    Posted 1 year ago #

    I am waaaay out of my league here. This is what I have in the CSS for the Main Menu. Can you pinpoint, please, where and what exactly do I have to do? :)

    /* =Main Menu
    -------------------------------------------------------------- */
    
    #mainmenu {
    	margin: 35px 0;
    	word-wrap: break-word;
    	margin-left: 150px;
    }
    
    ul#mainmenu-menu {
    	position: relative;
    
    	background: rgb(247,247,247);
    	background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
    	background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
    	background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
    	background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
    	background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
    	border: 1px solid #E2E2E2;
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f4f4f4',GradientType=0 );
    }
    
    ul#mainmenu-menu li.menu-item {
    	position: relative;
    
    	border-right: 1px solid #E2E2E2;
    	display: block;
    	float: left;
    	font-size: 11px;
    	font-weight: bold;
    }
    
    ul#mainmenu-menu li.menu-item a {
    	color: #5e5e5e;
    	display: block;
    	padding: 20px 40px;
    	text-decoration: none;
    }
    
    ul#mainmenu-menu li.menu-item a:hover {
    	background: #F9F9F9;
    }
    
    /* =Main Menu  : Scaled Menu
    -------------------------------------------------------------- */
    
    #mainmenu.scaled .container > div {
    	width: 100%;
    	height: 52px;
    
    	display: table;
    }
    
    #mainmenu.scaled ul#mainmenu-menu {
    	height: 52px;
    
    	display: table-row;
    }
    
    #mainmenu.scaled li.menu-item {
    	width: auto;
    	height: 52px;
    
    	border: none;
    	display: table-cell;
    	float: none;
    }
    
    #mainmenu.scaled li.menu-item a {
    	border: 1px solid #E2E2E2;
    	border-width: 1px 1px 1px 0;
    	text-align: center;
    }
    
    #mainmenu.scaled li.menu-item:first-child a {
    	border-left-width: 1px;
    }
    
    #mainmenu.scaled ul#mainmenu-menu ul.sub-menu li {
    	border-width: 0;
    	display: block;
    }
    
    #mainmenu.scaled ul#mainmenu-menu ul.sub-menu a {
    	border: none;
    }
    
    /* =Main Menu  : Main Dropdown
    -------------------------------------------------------------- */
    
    ul#mainmenu-menu li.menu-item a {
    	height: 52px;
    
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	color: #5e5e5e;
    	display: block;
    	padding: 20px 40px;
    	text-decoration: none;
    }
    
    ul#mainmenu-menu ul.sub-menu {
    	position: absolute;
    	top: 52px;
    	left: 0px;
    	width: 100%;
    
    	background: white;
    	border: none;
    	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    	display: none;
    	z-index: 99;
    }
    
    ul#mainmenu-menu li:hover ul.sub-menu {
    	display: block;
    }
    
    ul#mainmenu-menu ul.sub-menu li {
    	border: none;
    	display: block;
    	float: none;
    	font-weight: normal;
    }
    
    ul#mainmenu-menu ul.sub-menu li a {
    	height: auto;
    
    	line-height: 15px;
    	padding: 15px 15px 15px 15px;
    }
    
    /* =Slider
    -------------------------------------------------------------- */
    
    #slider {
    	margin: 35px 0;
    }
    
    /* =Slider  : Slides
    -------------------------------------------------------------- */
    
    #slider .slides {
    	line-height: 0;
    }
    
    #slider .slides img {
    	width: 100%;
    
    }
  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Looking at your CSS, you'll have to reformat a lot of your navigation to accomplish my recommendation;

    /* Include here the styles I recommended above */
    
    #mainmenu {
     margin: 0;
    }
    
    #mainmenu.scaled ul#mainmenu-menu {
     display: table;
    }
    
    #mainmenu.scaled li.menu-item {
     display: inherit;
     float: left;
    
     background: rgb(247,247,247);
     background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
     background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
     background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
     background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
     background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f4f4f4',GradientType=0 );
    }

    Does that theme allow you to enter CSS in a section of the dashboard named, "Custom CSS", "Jetpack" or "Custom Styles"?

  7. dorinspoaller
    Member
    Posted 1 year ago #

    Hello and thank you for your help so far!

    Does that theme allow you to enter CSS in a section of the dashboard named, "Custom CSS", "Jetpack" or "Custom Styles"?

    I have nothing like that.

  8. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Download (and install) this Custom CSS Manager plugin and use its allocated section of the dashboard to hold your CSS modifications.

  9. dorinspoaller
    Member
    Posted 1 year ago #

    I've installed it. What do you mean by "use its allocated section of the dashboard to hold your CSS modifications"?

    Should I enter what you posted above?

  10. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    I think it's under Settings in the dashboard, with the title as 'Custom CSS Manager'.

  11. dorinspoaller
    Member
    Posted 1 year ago #

    I found that, I was asking if I should add to this new section the code that you posted above. Should I add both?

  12. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Yes, both like this;

    ul#mainmenu-menu li.menu-item:nth-child(2),
    ul#mainmenu-menu li.menu-item:nth-child(3) {
     display: block;
    }
    
    ul#mainmenu-menu li.menu-item:nth-child(2) {
     margin-right: 50px;
    }
    
    ul#mainmenu-menu li.menu-item:nth-child(3) {
     margin-left: 50px;
    }
    
    #mainmenu {
     margin: 0;
    }
    
    #mainmenu.scaled ul#mainmenu-menu {
     display: table;
     background: none;
    }
    
    #mainmenu.scaled li.menu-item {
     display: inherit;
     float: left;
    
     background: rgb(247,247,247);
     background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
     background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
     background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
     background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
     background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f4f4f4',GradientType=0 );
    }

    Edit: Just edited the code in this post.

  13. dorinspoaller
    Member
    Posted 1 year ago #

    It's progress, but in order to insert the logo inside the space between PAGE 2 and PAGE 3 Im going to need to eliminate the white background from the menu (just between PAGE 2 and PAGE 3). Isn't there a way by which I can manage this menu or create a custom one that works easier that changing CSS?

  14. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Add this;

    #mainmenu.scaled ul#mainmenu-menu {
     margin: 0 auto;
     border: 0;
     background: none;
    }
  15. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Isn't there a way by which I can manage this menu or create a custom one that works easier that changing CSS?

    You can create a custom menu, but my code recommendations are based on the HTML from your current menu. The HTML from a custom menu will hold different classes. Adding/removing different amounts of menu items will also break the code.

  16. dorinspoaller
    Member
    Posted 1 year ago #

    WOW!!!

    Thank you very, very much!!!

    Now all I have to do is enlarge the gap and lower the logo into position.

    You were very helpful!

    Thanks a lot!

Topic Closed

This topic has been closed to new replies.

About this Topic