one pager but with submenus

giannisth · May 2021

hi, i have created yourfacebrand.com (it is under constructionm but you already have credentials to view it).

The one pager works fine. Now,i have created 2 more submenus under "what's new". they redirect properly.

BUT when i am on page https://www.yourfacebrand.com/sample-page/ (link of submenu) the menu does not work at all.

Any idea please?

Phil · May 2021

Hello,

That is because you have put the only ID in the menu items, and it will work only if you have one page.

If you want to use anchor links from other pages, you need to put the whole URL there or a more precise path.

I modified your two first menu items so you can check out what I am talking about.

Thanks

giannisth · May 2021

great,yes i get it now.

1.Is there also the ability to apply megamenu for submenus?

also in mobile view https://i.imgur.com/rBCbrFB.png how can i make the + and - more easily seen?can i change their colour?

If i change to menu classic mode i get this on wide screen https://i.imgur.com/qgR3NWs.png . what do i need to apply ion order to show the logo on the left and the menu higher?

giannisth · May 2021

please don't answer to par. 2 because i found it. In addition to par.1 how can i add smooth scrolling on menu clicks?

Phil · May 2021

I am a little confused about what part I am not supposed to answer. 😅

But to add a smooth scroll, please, add a scroll class to the menu item. If you do not see an input for CSS classes, please, open the Screen Options, and there you will be able to turn it on

Can you write what else is not clear yet, please?

Thanks

giannisth · May 2021

hi, yes sorry for that 😋.

Is there also the ability to apply megamenu for submenus with abckground etc??

also in mobile view https://i.imgur.com/rBCbrFB.png how can i make the + and - more easily seen?can i change their colour to be more clear??

Phil · May 2021

1) Yes, you can apply the mega menu for the submenu. Please, check the following video tutorial on how to achieve that.

https://support.muffingroup.com/video-tutorials/how-to-use-mega-menu/

2) You can change its color with CSS code that you need to place in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Do you need help with writing it?

Best regards

giannisth · May 2021

hi, yes please,can you provide css for a brighter colour?apply which ever you like and i will change it if needed.

Aso i have the following questions. Please see this screenshot https://i.imgur.com/klSM9c8.png . i have numbered the questions.

i need to dissapear the header number 1. I am trying to find it on https://www.yourfacebrand.com/support settings page. i would also like to apply a header like this with the blue backgroung, search bar etc. https://support.gocardless.com/hc/en-gb . How please?
i wish to dissapear the number 2.
the active hight of the menu is very wide (the menu items are links way up and down with the cursor being a hand.) How can i reduce this please?

thank you

Phil · May 2021

To change the +/- icon color, please, use the following code:

#Side_slide #menu ul li.submenu .menu-toggle{
   opacity: 1!important;
   color: #fff!important;
}

1) To turn off the breadcrumbs, please, go to Betheme -> Theme options -> Header & Subheader -> Subheader, and check Hide: Breadcrumbs.

At the top of this page, you can create a section with a Sidebar Widget item and a search widget inside it.

If you do not know how to create sidebars, please, check the following video tutorial:

https://support.muffingroup.com/video-tutorials/how-to-create-sidebars-and-manage-them/

But remember not to set it in the page options but only as a Sidebar Widget item.

2) Go to Betheme -> Theme options -> Header & Subheader -> Extras, and from Sliding top dropdown menu select Hide.

3) The height of the menu items depends on the logo height.

To reduce it, please, use a lower logo image.

Thanks

giannisth · May 2021

hi, thank you for the reply,very helpfull.only these two which did not work

1.regarding the breadcrambs Betheme -> Theme options -> Header & Subheader -> Subheader, and check Hide: Breadcrumbs., it was already unchecked but still showing.

2.regarding menu height, i reduced the logo size to half. Now it is 57x61 px but the active menu height remains the same.

thank you

Phil · May 2021

1) This option needs to be checked.

After that, it will disappear.

2) I just noticed that you have logo height set manually in Betheme -> Theme options -> Global -> Logo. Please, remove it, and check if the menu is shorter.

Thanks

giannisth · May 2021

i dissapeared breadcrambs but the top still appears https://i.imgur.com/wKn4x2s.png which presses the menu down.

also i applied https://i.imgur.com/l6Mo4RG.png and is a bit better but not quite.

giannisth · May 2021

hello, i did as above but i still have the top section with title showing so i tried to enable Subheader | Hide on sample page settings. But now the page title dissappears and the whole content just moves up with the menu showing on the wrong place.https://i.imgur.com/LnqpWMT.png

what should i apply please in order to force menu be at the proper top place and the rest of the content under?

also,i changed the hight to 60 and vertical padding to 15 which are defaults but still the active menu area is big,

giannisth · May 2021

further more the menu should normally be set on the top as the homepage and under there should be shown the page title

giannisth · May 2021

it seems ok now,i found out how. thank you.

how can i also create a login and sign up button on the menu like here e.g? https://gocardless.com/

giannisth · May 2021

regarding the previous post.this is the screenshot with bumber 3 https://i.imgur.com/tsJ0jdW.png
Also, i have created the megamenu but i have 3 more questions.

a. regarding number 1. how can i enter a subtitle?

b. regarding number 2. how can i add this>i suppose it is an image with link?

c. how do i change the background and remove the lines between submenus?

thank you

Phil · May 2021

a) You can add these titles as Menu items and style them with inline CSS or create a CSS class for it.

b) Please add a menu item with <img> tag to your menu.

c) To change the background, go to Betheme -> Theme options -> Colors -> Menu, and modify the submenu background.

To remove the lines, please, use the following CSS code:

#Top_bar .menu li > ul.mfn-megamenu{
   box-shadow: none!important;
   background-image: none!important;
}
#Top_bar .menu li ul.mfn-megamenu li a{
   border: none!important;
}

Thanks

giannisth · May 2021

hi,

a. regarding question2 . how can i please make it mobile responsive?e.g the image dows not appear well. please roll over menu "learn".

b. how can i add login and sign up button on the menu like here e.g? https://gocardless.com/

Phil · May 2021

a) You can create a second menu, where you will upload a smaller image, and select this menu to mobile display in Betheme -> Theme options -> Responsive -> Header.

b) If you need only one button, then you can use it as an Action button. The options for it are placed in Betheme -> Theme options -> Header & Subheader -> Extras.

But to style it, you will have to go to Betheme -> Theme options -> Global -> Buttons.

But if you want to have two buttons, you will have to add menu items and style them with CSS to look like you desired. In that case, you should contact your hosting provider.

Thanks

giannisth · May 2021

hi,please view this screenshot https://i.imgur.com/D73zXIU.png

the space 1. is big and when the cursors leaves the menu and goes to submenu,the submenu dissappears.Can this be reduced?is this due to the new buttons margin?can you please check what i must change?
what css rule do i hace to apply in order to reduce the non link on submenu number 3?
what must i apply in order not to have background on sumbenu rollover?
thank you

Phil · May 2021

1) That is right, the submenu goes down because of the margin of the new button. As you can see on the following screenshot, the submenu starts where the menu item ends.

You can move the submenu up with the following CSS code:

#Top_bar:not(.is-sticky) #menu ul.sub-menu{
   top: 70%!important;
}

2)

#menu ul.sub-menu .mfn-megamenu-title{
   padding: 0 5px!important;
}

3) Sorry, but I do not know what color you are talking about. Could you bring it closer to me?

Thanks

giannisth · May 2021

hello,

regarding 1. the css worked but it cuts of the button's borders https://i.imgur.com/QMruaKW.png

so can you please tell me what to change in order to make the circle border smaller?

i am using the following css:

.css-15teht8 {

-webkit-align-items: baseline;

-webkit-box-align: baseline;

-ms-flex-align: baseline;

align-items: baseline;

margin: 0;

padding: 0;

-webkit-appearance: none;

-moz-appearance: none;

-ms-appearance: none;

appearance: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

border: none;

border-radius: 0;

background: none;

font-family: inherit;

font-weight: inherit;

font-size: inherit;

line-height: inherit;

color: inherit;

width: auto;

cursor: pointer;

-webkit-text-decoration: none;

text-decoration: none;

-webkit-box-flex-wrap: nowrap;

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

display: -webkit-inline-box;

display: -webkit-inline-flex;

display: -ms-inline-flexbox;

display: inline-flex;

-webkit-align-items: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

font-weight: 600;

text-align: center;

border-radius: calc(12px + 24px);

color: #f3f4f5;

background-color: #5f24d2;

-webkit-transition: border 150ms,background 150ms,-webkit-transform 100ms ease-in-out;

transition: border 150ms,background 150ms,transform 100ms ease-in-out;

border: 1px solid #5f24d2;

padding: 0px 0px;

font-size: 14px;

line-height: 20px;

color: #5f24d2;

background-color: transparent;

border-color: #5f24d2;

width: auto;

display: -webkit-inline-box;

display: -webkit-inline-flex;

display: -ms-inline-flexbox;

display: inline-flex;

}

regarding 2, i applied it and it's ok. but i also need to change color.So i added this

#menu ul.sub-menu .mfn-megamenu-title{

padding: 0 10px!important;

font-size: 10px;

color: #c87aca;

}

but the colour does not change.

Also i am trying to add a description under the main sumenu https://i.imgur.com/tGTqLtL.png.

Is there a way to edit this description with smaller text? https://i.imgur.com/dqgKCdH.png

Regarding 3 "what must i apply in order not to have background on sumbenu rollover?" what css must i apply please in order to not change to grey colour when mouse hover and/or current page https://i.imgur.com/tGTqLtL.png

thank you

Phil · May 2021

1) Instead of your CSS, please, add a class to the menu item (you can name it however you want), and use the following code:

#menu .yourClassName span{
   border: 1px solid #fff!important;
   border-radius: 40px!important;
}

2) I can see that the color changed.

Did you handle it?

3) Try to use the inline CSS to decrease the description font size.

4)

#Top_bar .menu > li ul li a:hover,
#Top_bar .menu > li ul li.current-menu-item > a{
   background-color: transparent!important;
}

Thanks

giannisth · May 2021

hello,

regarding 3 (add a description under the main sumenu) is there a way to force it to go under the submenu item and not next to it? https://i.imgur.com/63iA9jW.png

regarding 1 you said "Instead of your CSS, please, add a class to the menu item (you can name it however you want), and use the following code:"

you mean delete the whole of the above .css-15teht8 and just add the part you gave me?if yes, where exactly do i add it?i entered it in css of theme settings but it does not apply any buttons.

thank you

Phil · May 2021

1) Please put the <br> tag at the end of the menu item label.

2) Yes, you can delete this CSS above and add the name of the class to the menu item in Appearance -> Menus.

After that, put the code in the theme options.

And it will look like this:

Thanks

giannisth · June 2021

hello, it worked but can we reduce the great blank space? https://i.imgur.com/KM3yrO6.png

Phil · June 2021

Sorry, but unfortunately, there is no setting to achieve that.

Best regards

one pager but with submenus

Comments