Creating a Vertical Menu List in the Header

  • Hello dear People

    I am struggeling with my Idea to Display the Main Menu in the Header as a vertical list.

    Home
    Work
    About
    Contact
    __________________________

    Content
    Content
    Content

    So that means i dont want the Menu to appear like the vertical Menu option offers it.
    I just want to make a simple List to Display the Menu.

    Is there any Way to do this?

    And of course in the sticky header, i want to display the menu as ussually like

    LOGO Home Work About Contact
    _______________________________________________

    Content
    Content
    Content
    Content

    I was looking in the templates/parts/header/parts/menu.php and i tried some things, but it looks like i dont know where to start. If there is a CSS Solution it would be awesome.

    To show you what i mean i can give you an example of this theme, that has exactly how i want the menu. I′ve seen it in the Arnold Theme:
    https://www.uiueux.com/wp/arnold3/home7/

    Just that they dont have the Sticky Header while scrolling in the Page Content.
    I like to have Both: The Main Menu shown as a List and the Sticky Header Shown as the normal horizontal Menu.

    I am very happy for every orientation and i am very motivated to learn and go through this to learn more about how wordpress really works.

    Thank you for reading! ??

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello Benjamin,

    I would recommend to inspect your pages and write some css rules in the custom css setting of the live customizer.

    Useful resources for WordPress site customization :?

    https://docs.presscustomizr.com/article/72-basics-of-css-and-html-for-wordpress-themes

    https://docs.presscustomizr.com/article/63-css-resources-for-wordpress-developers

    Thread Starter benjamindilorenzo

    (@benjamindilorenzo)

    Thanks a lot for your recommendation, i checked that out. Right now i struggle to adress the right selector for the menu-item container.

    ??

    Hi Benjamin,

    Here’s the selector for the menu items parent:

    #navi-header

    Thread Starter benjamindilorenzo

    (@benjamindilorenzo)

    Hello Emran

    Thanks a lot. So far i just found a Section with #nav-header instead of #navi-header

    I was searching in the whole theme in every css or less file.
    I wanted to see first how the css is build up before i change something. Later i wanted to adjust it in a child theme or just overwrite in in the css adding section.

    Can you give me one more hint or tip? I will do my research too and will continue to learn about the structure in this theme.

    Thread Starter benjamindilorenzo

    (@benjamindilorenzo)

    So i tried a lot of things, and the only effect i could get was, when i insert this code into the individuel css window:

    .navbar .nav {
    list-style: initial !important;
    }

    Then i got some dots.

    Or i found this in the tc_custom less file:

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
    padding: 5px 20px 5px 20px;
    font-size:16px;
    }

    And if i change the padding from 20 to, lets say 800 px then, of course, i get a vertical list.

    But this seems all very confusing to me. I Aks myself, where is the main property, that once changed the li attribute from a vertical list to a horizontal???

    It would be wonderfull to have an advice, i dont want to give up! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Creating a Vertical Menu List in the Header’ is closed to new replies.